Landmarks devem ter uma combinação única de role ou role/label/title (ou seja, nome acessível)

Elementos HTML landmark como <header>, <nav>, <main>, <aside>, <form>, <section>, e <footer> — bem como elementos com roles ARIA landmark explícitos — criam pontos de navegação que as tecnologias assistivas expõem aos utilizadores. Os leitores de ecrã frequentemente fornecem uma lista de todos os landmarks na página ou permitem que os utilizadores saltem entre eles usando atalhos de teclado. Quando dois ou mais landmarks partilham o mesmo role e não têm nome acessível (ou partilham o mesmo nome acessível), aparecem idênticos nessa lista. Um utilizador que ouve “navigation” e “navigation” não tem forma de saber se o primeiro é o menu geral do site e o segundo é um breadcrumb trail.

Este problema afeta principalmente utilizadores cegos, utilizadores surdocegos, e utilizadores videntes de teclado que dependem das funcionalidades de navegação por landmarks de tecnologia assistiva. É assinalado como uma regra de melhores práticas Deque. Embora não mapeie diretamente para um critério de sucesso WCAG específico, apoia fortemente a intenção de WCAG 1.3.1 (Info and Relationships) e WCAG 2.4.1 (Bypass Blocks), que requerem que a informação estrutural esteja disponível programaticamente e que os utilizadores tenham mecanismos para navegar além de blocos repetidos de conteúdo.

Como corrigir o problema

A correção depende se você realmente precisa de múltiplos landmarks do mesmo tipo:

1. Se apenas um landmark de um dado role existe na página, não é necessária rotulagem adicional — já é único pelo seu role apenas.
2. Se múltiplos landmarks partilham o mesmo role, dê a cada um um nome acessível único usando aria-label ou aria-labelledby.
3. Se landmarks duplicados não são necessários, considere removê-los ou consolidá-los.

Ao escolher nomes acessíveis, escolha rótulos que descrevam claramente o propósito de cada landmark, como “Navegação principal,” “Navegação do rodapé,” ou “Formulário de pesquisa.”

Exemplos

Incorreto: Landmarks <nav> duplicados sem nomes acessíveis

Os utilizadores de leitores de ecrã veem dois landmarks “navigation” idênticos sem forma de os distinguir.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<nav>
  <a href="/terms">Terms</a>
  <a href="/privacy">Privacy</a>
</nav>

Correto: Landmarks <nav> duplicados com nomes acessíveis únicos

Cada landmark agora tem um rótulo distinto que os leitores de ecrã anunciam.

<nav aria-label="Main">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<nav aria-label="Footer">
  <a href="/terms">Terms</a>
  <a href="/privacy">Privacy</a>
</nav>

Incorreto: Dois elementos <aside> com o mesmo aria-label

Mesmo que os rótulos estejam presentes, são idênticos, pelo que os landmarks continuam indistinguíveis.

<aside aria-label="Related content">
  <p>Popular articles</p>
</aside>

<aside aria-label="Related content">
  <p>Recommended products</p>
</aside>

Correto: Dois elementos <aside> com valores aria-label únicos

<aside aria-label="Popular articles">
  <p>Popular articles</p>
</aside>

<aside aria-label="Recommended products">
  <p>Recommended products</p>
</aside>

Correto: Usar aria-labelledby para referenciar cabeçalhos visíveis

Se os seus landmarks já contêm cabeçalhos, pode apontar para esses cabeçalhos em vez de duplicar texto em aria-label.

<nav aria-labelledby="nav-main-heading">
  <h2 id="nav-main-heading">Main Menu</h2>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<nav aria-labelledby="nav-breadcrumb-heading">
  <h2 id="nav-breadcrumb-heading">Breadcrumb</h2>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

Correto: Apenas um landmark de um dado role — não é necessário rótulo

Quando um role landmark aparece apenas uma vez na página, é inerentemente único.

<header>
  <h1>My Website</h1>
</header>

<main>
  <p>Page content goes here.</p>
</main>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

Incorreto: Roles ARIA landmark duplicados sem nomes únicos

Usar roles ARIA explícitos não muda o requisito — duplicados ainda precisam de nomes únicos.

<div role="complementary">
  <p>Sidebar content A</p>
</div>

<div role="complementary">
  <p>Sidebar content B</p>
</div>

Correto: Roles ARIA landmark explícitos com nomes acessíveis únicos

<div role="complementary" aria-label="Author bio">
  <p>Sidebar content A</p>
</div>

<div role="complementary" aria-label="Related links">
  <p>Sidebar content B</p>
</div>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA - Landmarks Example

→