Use elementos HTML que expressem a função: cabeçalho do site, navegação, conteúdo principal, complemento e rodapé. Essas regiões (landmarks) permitem que pessoas usuárias de tecnologia assistiva saltem diretamente para partes importantes.
Mapeie as regiões
- O header global, filho direto de body, identifica o banner. Header dentro de artigo/seção não é o banner do site.
- Nav identifica cada conjunto de navegação. Se houver menu global e sumário local, dê nomes claros e distintos, por exemplo “Principal” e “Nesta página”.
- Main marca o assunto central. Use apenas um main por página.
- Aside serve para conteúdo complementar relacionado que faz sentido fora do fluxo principal.
- Footer global, filho direto de body, identifica o rodapé institucional. Footer interno de artigo não tem automaticamente esse papel.
- Section só deve virar região navegável quando representar conteúdo importante e receber nome acessível associado a título visível. Não rotule toda caixa da interface.
Exemplo HTML
<header><a href="/">Hipersite</a></header>
<nav aria-label="Principal">
<a href="/servicos/">Serviços</a>
<a href="/biblioteca/">Biblioteca</a>
</nav>
<main id="conteudo">
<h1>Como organizar as páginas</h1>
<p>Conteúdo central.</p>
</main>
<footer><a href="/contato/">Contato</a></footer>Valide
Use a lista de landmarks ou árvore de acessibilidade. Confirme um main, nomes claros e distintos para navegações diferentes, ordem coerente e que nenhum conteúdo ficou fora de região apropriada. Teste salto por landmarks, teclado e leitor de tela. Excesso de landmarks atrapalha; a WAI recomenda priorizar poucas regiões relevantes.
Consulte Landmark Regions, WAI-ARIA APG e Page Regions, W3C WAI. Veja o núcleo de sites institucionais.