Sobre esta regra de acessibilidade
As regiões landmark fornecem a estrutura básica de uma página web. Elas permitem aos utilizadores de leitores de ecrã saltar diretamente para secções principais — como a navegação, conteúdo principal ou rodapé — sem ter de navegar com tab ou setas através de todos os elementos da página. Isto é semelhante a como os utilizadores com visão examinam visualmente o layout de uma página para encontrar o que precisam.
Quando existe conteúdo fora de qualquer landmark, os leitores de ecrã podem ignorá-lo completamente durante a navegação por landmarks, ou os utilizadores podem encontrá-lo sem qualquer contexto sobre a que secção da página pertence. Isto afeta principalmente utilizadores que são cegos ou surdocegos, bem como utilizadores com deficiências motoras que dependem de tecnologias assistivas para navegar eficientemente.
Esta regra é sinalizada como uma melhor prática da Deque e também é referenciada no RGAA (o padrão de acessibilidade do governo francês). Embora não corresponda diretamente a um critério de sucesso específico das WCAG, apoia fortemente as WCAG 1.3.1 (Informação e Relações) e WCAG 2.4.1 (Ignorar Blocos) ao garantir que a estrutura da página é transmitida programaticamente às tecnologias assistivas.
Como funcionam os landmarks
O HTML5 introduziu elementos semânticos que criam automaticamente regiões landmark:
| Elemento HTML5 | Role ARIA equivalente | Propósito |
|---|---|---|
<header> |
banner |
Cabeçalho do site (quando não aninhado dentro de <article> ou <section>) |
<nav> |
navigation |
Links de navegação |
<main> |
main |
Conteúdo principal da página |
<footer> |
contentinfo |
Rodapé do site (quando não aninhado dentro de <article> ou <section>) |
<aside> |
complementary |
Conteúdo de apoio |
<section> (com nome acessível) |
region |
Uma secção distinta da página |
<form> (com nome acessível) |
form |
Uma região de formulário |
Usar elementos nativos HTML5 é preferível a roles ARIA. O princípio geral é: se um elemento HTML nativo fornece a semântica de landmark que você precisa, use-o em vez de adicionar atributos role a elementos <div> genéricos.
Como resolver o problema
-
Audite a sua página para qualquer conteúdo que se encontre diretamente dentro de
<body>sem estar envolvido num elemento landmark. -
Envolva conteúdo órfão no landmark apropriado. A maior parte do conteúdo do corpo pertence dentro de
<main>. Cabeçalhos e rodapés pertencem em<header>e<footer>. Navegação pertence em<nav>. - Links de salto são a exceção — um link de salto de navegação colocado antes do primeiro landmark é aceitável e não precisa de estar envolvido num landmark.
-
Use
<main>como um contentor universal para qualquer conteúdo que não pertença no cabeçalho, rodapé ou navegação. Cada página deve ter exatamente um elemento<main>.
Exemplos
Incorreto: conteúdo fora de landmarks
Neste exemplo, o parágrafo introdutório e o banner promocional ficam fora de qualquer região landmark. Um utilizador de leitor de ecrã navegando por landmarks perdê-los-ia.
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<p>Welcome to our site! Check out our latest offerings.</p>
<main>
<h2>Featured Products</h2>
<p>Browse our catalog below.</p>
</main>
<div class="promo-banner">
<p>Free shipping on orders over $50!</p>
</div>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
O elemento <p> após <header> e o <div class="promo-banner"> não estão dentro de qualquer landmark.
Correto: todo o conteúdo dentro de landmarks
Mova o conteúdo órfão para landmarks apropriados:
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<p>Welcome to our site! Check out our latest offerings.</p>
<h2>Featured Products</h2>
<p>Browse our catalog below.</p>
<aside>
<p>Free shipping on orders over $50!</p>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>Correto: estrutura básica de página com landmarks HTML5
<body>
<header>
<h1>Site Name</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/contact">Contact</a>
</nav>
<main>
<h2>Page Title</h2>
<p>All primary content goes here.</p>
</main>
<footer>
<p>© 2024 Site Name</p>
</footer>
</body>Correto: usar roles ARIA (quando elementos HTML5 não são uma opção)
Se não conseguir usar elementos semânticos HTML5, aplique roles ARIA de landmark a elementos genéricos:
<body>
<div role="banner">
<h1>Site Name</h1>
</div>
<div role="navigation">
<a href="/">Home</a>
<a href="/contact">Contact</a>
</div>
<div role="main">
<h2>Page Title</h2>
<p>All primary content goes here.</p>
</div>
<div role="contentinfo">
<p>© 2024 Site Name</p>
</div>
</body>Esta abordagem é válida mas menos preferível. Os elementos nativos HTML5 são mais claros, requerem menos código e são melhor suportados pelos navegadores e tecnologias assistivas.
Correto: link de salto antes dos landmarks
Um link de salto de navegação colocado antes de todos os landmarks é a única exceção aceite a esta regra:
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<h1>Site Name</h1>
</header>
<nav>
<a href="/">Home</a>
</nav>
<main id="main-content">
<h2>Page Content</h2>
<p>This is the main content area.</p>
</main>
<footer>
<p>© 2024 Site Name</p>
</footer>
</body>O link de salto existe fora de qualquer landmark, mas isto é intencional e não acionará a regra.
Ajude-nos a melhorar os nossos guias
Detecte problemas de acessibilidade automaticamente
O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.