Regra de acessibilidade: O documento não deve ter mais do que um landmark contentinfo

Sobre esta regra de acessibilidade

Os landmarks são uma das principais formas dos utilizadores de leitores de ecrã se orientarem numa página. Ferramentas como JAWS, NVDA e VoiceOver permitem aos utilizadores aceder a uma lista de landmarks e saltar diretamente para qualquer um deles. O landmark contentinfo normalmente contém informações como avisos de direitos de autor, políticas de privacidade e links de contacto que se aplicam a toda a página. Quando existem múltiplos landmarks contentinfo, os utilizadores de leitores de ecrã encontram entradas duplicadas na sua lista de landmarks e não conseguem distinguir qual é o rodapé real da página. Isto cria confusão e torna a navegação mais lenta.

O landmark contentinfo é gerado de duas formas: adicionando role="contentinfo" a um elemento, ou usando um elemento <footer> que seja filho direto de <body> (ou não aninhado dentro de <article>, <aside>, <main>, <nav> ou <section>). Um <footer> aninhado dentro de um desses elementos de seccionamento não mapeia para o role contentinfo, por isso não irá desencadear este problema. No entanto, role="contentinfo" aplicado explicitamente a qualquer elemento irá sempre criar um landmark contentinfo independentemente do aninhamento.

Quem é afetado

Utilizadores de leitores de ecrã (utilizadores cegos e surdocegos) dependem da navegação por landmarks para se moverem eficientemente através de uma página. Landmarks contentinfo duplicados desorganizam a lista de landmarks e tornam mais difícil encontrar o rodapé real da página.
Utilizadores visuais que usam o teclado que usam extensões do navegador ou ferramentas assistivas para navegação baseada em landmarks também são afetados.

Normas relacionadas

Esta regra é uma boa prática da Deque. Embora não esteja mapeada para um critério específico de sucesso das WCAG, suporta os princípios por trás das WCAG 1.3.1 Info and Relationships e WCAG 2.4.1 Bypass Blocks, que enfatizam a estrutura semântica correta e a navegação eficiente. A própria especificação ARIA afirma que role="banner", role="main" e role="contentinfo" devem cada um ser usados apenas uma vez por página.

Como corrigir

Audite a sua página para todos os elementos que criam um landmark contentinfo. Procure por role="contentinfo" e por elementos <footer> de nível superior.
Mantenha apenas um landmark contentinfo que represente o rodapé de todo o site.
Se precisar de conteúdo semelhante a rodapé dentro de artigos ou secções, use <footer> aninhado dentro de <article>, <section> ou <main> — estes não criam um landmark contentinfo.
Remova quaisquer atributos role="contentinfo" extra de elementos que não sejam o rodapé ao nível da página.

Exemplos

Exemplo incorreto: múltiplos landmarks `contentinfo`

Neste exemplo, role="contentinfo" é usado em dois elementos separados, criando landmarks contentinfo duplicados. O <footer> no final também cria um terceiro, visto que é filho direto de <body>.

<header>Visit Your Local Zoo!</header>

<main>
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>What you see in the zoo are examples of inborn traits left undeveloped.</p>
    <div role="contentinfo">
      <p>Article metadata here</p>
    </div>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>Some animals naturally group together with their own kind.</p>
    <div role="contentinfo">
      <p>Article metadata here</p>
    </div>
  </article>
</main>

<footer>
  <p>Brought to you by North American Zoo Partnership</p>
</footer>

Exemplo correto: landmark `contentinfo` único

Aqui, role="contentinfo" é usado exatamente uma vez para o rodapé da página. Os rodapés ao nível do artigo usam <footer> aninhado dentro de <article>, que não cria um landmark contentinfo.

<div role="banner">
  <p>Visit Your Local Zoo!</p>
</div>

<div role="main">
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>What you see in the zoo are examples of inborn traits left undeveloped.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>Some animals naturally group together with their own kind.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
</div>

<div role="contentinfo">
  <p>Brought to you by North American Zoo Partnership</p>
</div>

Exemplo correto: usando elementos semânticos HTML5

Esta versão usa elementos semânticos HTML5. O único <footer> de nível superior mapeia para o role contentinfo. Os elementos <footer> dentro de cada <article> não.

<header>
  <p>Visit Your Local Zoo!</p>
</header>

<main>
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>What you see in the zoo are examples of inborn traits left undeveloped.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>Some animals naturally group together with their own kind.</p>
    <footer>
      <p>Article metadata here</p>
    </footer>
  </article>
</main>

<footer>
  <p>Brought to you by North American Zoo Partnership</p>
</footer>

O que esta regra verifica

A regra axe-core landmark-no-duplicate-contentinfo encontra todos os elementos que mapeiam para o role de landmark contentinfo, filtra quaisquer que não se resolvam efetivamente para esse role (como elementos <footer> aninhados dentro de elementos de seccionamento), e verifica que apenas um landmark contentinfo permanece na página. Se for encontrado mais do que um, a regra reporta uma violação.

Learn more: