Regra de acessibilidade: Aside não deve estar contido em outro landmark

Sobre esta regra de acessibilidade

As regiões landmark são áreas estruturais de uma página — como <main>, <nav>, <header>, <footer>, e <aside> — que ajudam os utilizadores de tecnologia assistiva a compreender o layout e navegar rapidamente entre secções. Os leitores de ecrã fornecem teclas de atalho que permitem aos utilizadores saltar diretamente para estes landmarks, facilitando o acesso ao conteúdo de que necessitam.

O elemento <aside> (ou role="complementary") representa conteúdo que complementa o conteúdo principal, como barras laterais, ligações relacionadas, ou contexto adicional. Quando um <aside> está aninhado dentro de outro landmark como <main> ou <nav>, os leitores de ecrã podem não o expor como um landmark de nível superior. Isto significa que os utilizadores que dependem da navegação por landmarks podem não conseguir descobrir ou saltar para esse conteúdo complementar, efetivamente escondendo-o do seu fluxo de navegação.

Este problema afeta principalmente utilizadores de leitores de ecrã, que dependem dos landmarks como uma forma primária de se orientarem e moverem através de uma página. Quando os landmarks estão incorretamente aninhados, a estrutura da página torna-se confusa ou incompleta, reduzindo a eficiência e usabilidade da tecnologia assistiva.

Esta regra relaciona-se com o Critério de Sucesso 1.3.1 das WCAG 2.1 (Informação e Relações), que requer que informação, estrutura e relações transmitidas visualmente estejam também disponíveis programaticamente. Também suporta o Critério de Sucesso 4.1.2 das WCAG 2.1 (Nome, Role, Valor) e a boa prática geral de usar landmarks corretamente para que as tecnologias assistivas possam apresentar a estrutura do conteúdo com precisão.

Como corrigir

Mova os elementos <aside> para o nível superior do corpo do documento, fora de <main>, <nav>, <header>, <footer>, ou qualquer outro landmark.
Verifique role="complementary" em quaisquer elementos e assegure-se de que também estão colocados no nível superior, não aninhados dentro de outro landmark.
Se o conteúdo realmente pertence dentro de outro landmark e não se destina a ser navegável independentemente, considere se realmente precisa de ser um <aside>. Um simples <div> ou <section> sem um role de landmark pode ser mais apropriado.

Exemplos

Incorreto: `<aside>` aninhado dentro de `<main>`

<main>
  <h1>Article Title</h1>
  <p>Main article content goes here.</p>

  <aside>
    <h2>Related Links</h2>
    <ul>
      <li><a href="/topic-a">Topic A</a></li>
      <li><a href="/topic-b">Topic B</a></li>
    </ul>
  </aside>
</main>

Neste exemplo, o <aside> está dentro de <main>, pelo que os leitores de ecrã podem não o listar como um landmark de nível superior. Os utilizadores que navegam por landmarks podem perder completamente as ligações relacionadas.

Correto: `<aside>` no nível superior junto a `<main>`

<main>
  <h1>Article Title</h1>
  <p>Main article content goes here.</p>
</main>

<aside>
  <h2>Related Links</h2>
  <ul>
    <li><a href="/topic-a">Topic A</a></li>
    <li><a href="/topic-b">Topic B</a></li>
  </ul>
</aside>

Agora o <aside> é irmão de <main>, tornando-o um landmark de nível superior que os utilizadores de leitores de ecrã podem facilmente descobrir e para onde podem navegar.

Incorreto: `role="complementary"` aninhado dentro de `<nav>`

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
  <div role="complementary">
    <p>Navigation tip: Use keyboard shortcuts to browse faster.</p>
  </div>
</nav>

Correto: `role="complementary"` movido para o nível superior

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<div role="complementary" aria-label="Navigation tips">
  <p>Navigation tip: Use keyboard shortcuts to browse faster.</p>
</div>

Ao manter os landmarks complementares no nível superior da página, você assegura que todos os utilizadores — incluindo aqueles que usam tecnologia assistiva — possam descobrir e navegar para cada secção do seu conteúdo.

Learn more: