Regra de acessibilidade: Documento não deve ter mais do que um ponto de referência banner

Sobre esta regra de acessibilidade

Os pontos de referência são marcadores estruturais que permitem aos utilizadores de tecnologias assistivas navegar rapidamente para secções-chave de uma página. Leitores de ecrã como JAWS, NVDA e VoiceOver fornecem teclas de atalho que permitem aos utilizadores saltar diretamente para pontos de referência como o banner, navegação, conteúdo principal e rodapé. Quando uma página tem mais do que um ponto de referência banner, os utilizadores encontram ambiguidade — não conseguem distinguir qual banner é o cabeçalho principal do site, anulando o propósito da navegação por pontos de referência.

Este problema afeta principalmente utilizadores cegos e utilizadores surdocegos que dependem de leitores de ecrã, bem como utilizadores videntes que usam teclado que podem usar extensões de browser para navegação por pontos de referência. Quando os pontos de referência são duplicados, estes utilizadores têm de gastar tempo extra a navegar por regiões repetidas ou redundantes para encontrar o conteúdo de que necessitam.

Esta regra é uma boa prática Deque para estrutura acessível de pontos de referência. Embora não mapeie para um critério de sucesso WCAG específico, suporta diretamente os objetivos do WCAG 1.3.1 Informação e Relações e WCAG 2.4.1 Saltar Blocos ao garantir que a estrutura da página é lógica e navegável.

Compreender o ponto de referência banner

Um ponto de referência banner representa o cabeçalho do site — a região que tipicamente contém o logótipo do site, nome do site, navegação global e pesquisa. Existem duas formas de criar um ponto de referência banner:

Um elemento <header> que é filho direto de <body> (não aninhado dentro de <main>, <article>, <section>, <aside> ou <nav>) tem automaticamente um role="banner" implícito.
Qualquer elemento com role="banner" explicitamente atribuído.

Embora a especificação HTML5 permita múltiplos elementos <header> numa página, apenas um <header> de nível superior mapeia para o papel de ponto de referência banner. Um <header> aninhado dentro de um <article> ou <section> não se torna um ponto de referência banner — é simplesmente um cabeçalho para essa secção. A confusão surge quando os programadores colocam múltiplos elementos <header> diretamente sob <body>, ou misturam role="banner" explícito com um <header> de nível superior.

Como corrigir

Identifique todos os pontos de referência banner na sua página. Procure elementos <header> de nível superior e qualquer elemento com role="banner".
Mantenha apenas um como o banner principal do site. Este deve ser o cabeçalho que contém o logótipo do seu site, nome do site ou navegação global.
Remova ou reestruture quaisquer pontos de referência banner adicionais:
- Se tem elementos <header> extra ao nível superior, aninhe-os dentro de um elemento de secção como <section> ou <article> para que percam o seu papel de banner implícito.
- Se tem atributos role="banner" extra, remova-os.
Não use role="banner" num <header> que já é filho direto de <body> — é redundante. Inversamente, não adicione role="banner" a múltiplos elementos.

Exemplos

Incorreto: Múltiplos pontos de referência banner

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <header>
    <p>Welcome to the promotional section</p>
  </header>
  <main>
    <p>Page content here.</p>
  </main>
</body>

Ambos os elementos <header> são filhos diretos de <body>, por isso ambos se tornam pontos de referência banner. Os leitores de ecrã reportarão dois banners.

Incorreto: Misturar `role="banner"` com um `<header>` de nível superior

<body>
  <header>
    <h1>My Website</h1>
  </header>
  <div role="banner">
    <p>Site-wide announcement</p>
  </div>
  <main>
    <p>Page content here.</p>
  </main>
</body>

O <header> tem implicitamente role="banner", e o <div> tem explicitamente role="banner", resultando em dois pontos de referência banner.

Correto: Ponto de referência banner único

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h2>Article Title</h2>
        <p>Published on January 1, 2025</p>
      </header>
      <p>Article content here.</p>
    </article>
  </main>
</body>

Apenas o primeiro <header> é filho direto de <body> e mapeia para o ponto de referência banner. O segundo <header> está aninhado dentro de <article>, por isso não cria um ponto de referência banner.

Correto: Usar `role="banner"` num único elemento

<body>
  <div role="banner">
    <h1>My Website</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </div>
  <main>
    <p>Page content here.</p>
  </main>
</body>

Apenas um elemento carrega o papel banner, por isso os leitores de ecrã identificam corretamente um único ponto de referência banner.

Learn more: