Regra de acessibilidade: O landmark contentinfo não deve estar contido noutro landmark

Sobre esta regra de acessibilidade

Os landmarks são uma das principais formas dos utilizadores de leitores de ecrã se orientarem numa página e navegarem entre as secções principais. O landmark contentinfo destina-se especificamente a conter informação do rodapé de todo o site — avisos de direitos de autor, políticas de privacidade, ligações de contacto e conteúdo semelhante. Os leitores de ecrã como JAWS, NVDA e VoiceOver fornecem teclas de atalho que permitem aos utilizadores saltar diretamente para landmarks por função.

Quando um landmark contentinfo está aninhado dentro de outro landmark (como main ou navigation), deixa de aparecer como um landmark de nível superior na lista de landmarks do leitor de ecrã. Isto significa que utilizadores cegos e surdocegos podem não conseguir encontrar a informação do rodapé de forma eficiente, ou podem encontrá-la inesperadamente enquanto navegam numa secção diferente da página. O benefício organizacional dos landmarks é comprometido quando são inadequadamente aninhados.

Esta regra é uma boa prática da Deque alinhada com os princípios mais amplos do uso adequado de landmarks recomendados pela especificação ARIA Landmarks do W3C. Embora não mapeada para um critério de sucesso específico das WCAG, a estrutura correta de landmarks suporta as WCAG 1.3.1 (Informação e Relações), WCAG 2.4.1 (Contornar Blocos) e o objetivo geral de fornecer uma estrutura de documento clara e navegável.

Como corrigir

Localize o seu landmark contentinfo. Este é um elemento <footer> que é um filho direto de <body> (que implicitamente tem role="contentinfo") ou qualquer elemento com um role="contentinfo" explícito.
Verifique a sua posição no DOM. Se o landmark contentinfo estiver aninhado dentro de um <main>, <nav>, <aside>, <section>, <header>, ou qualquer elemento com uma função de landmark, precisa de ser movido.
Mova-o para o nível superior. Reestruture o seu HTML para que o landmark contentinfo seja um filho direto de <body>, fora de todas as outras regiões de landmark.

Note que um elemento <footer> só tem a função contentinfo implícita quando tem como âmbito o <body>. Um <footer> aninhado dentro de um <article>, <section>, <aside>, <nav>, ou <main> não tem a função contentinfo — torna-se um elemento genérico. Isto significa que o problema tipicamente surge quando você adiciona explicitamente role="contentinfo" a um elemento aninhado, ou quando a estrutura da sua página coloca acidentalmente o <footer> de todo o site dentro de outro landmark.

Exemplos

Incorreto: landmark `contentinfo` aninhado dentro de `main`

<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
    <footer>
      <p>&copy; 2024 Example Company</p>
    </footer>
  </main>
</body>

Neste exemplo, o <footer> está dentro de <main>, por isso não recebe a função contentinfo implícita. Se um programador tentar corrigir isso adicionando role="contentinfo" explicitamente, o landmark fica aninhado dentro de main, o que despoleta esta regra:

<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
    <div role="contentinfo">
      <p>&copy; 2024 Example Company</p>
    </div>
  </main>
</body>

Correto: landmark `contentinfo` no nível superior

<body>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
  </main>
  <footer>
    <p>&copy; 2024 Example Company</p>
  </footer>
</body>

Aqui, o <footer> é um filho direto de <body> e situa-se fora do landmark <main>. Recebe automaticamente a função contentinfo implícita, e os utilizadores de leitores de ecrã podem saltar diretamente para ele usando a navegação por landmarks.

Incorreto: `role="contentinfo"` explícito dentro de uma `region`

<body>
  <main>
    <h1>Dashboard</h1>
  </main>
  <section aria-label="Additional info">
    <footer role="contentinfo">
      <p>Privacy Policy | Terms of Service</p>
    </footer>
  </section>
</body>

Correto: `contentinfo` movido para fora da `region`

<body>
  <main>
    <h1>Dashboard</h1>
  </main>
  <footer>
    <p>Privacy Policy | Terms of Service</p>
  </footer>
</body>

O landmark contentinfo está agora no nível superior do documento, tornando-o imediatamente descobrível através da navegação por landmarks do leitor de ecrã.

Learn more: