Landmarks ARIA: main, nav, header, footer e aside no seu site

O que são os landmarks ARIA e por que você precisa deles?

Imagine que você entra num supermercado onde não há placas indicando onde ficam as frutas, a carne ou a padaria. Simplesmente caminha entre corredores idênticos sem saber onde está. Isso é exatamente o que experimenta uma pessoa que usa um leitor de tela quando o seu site não tem landmarks ARIA. Você navega às cegas, sem referências, sem estrutura.

Os landmarks ARIA são regiões semânticas que dividem a sua página web em blocos com significado: a navegação principal, o conteúdo central, o cabeçalho, o rodapé e as barras laterais. São como as placas do supermercado: dizem às tecnologias assistivas «aqui está o menu», «aqui começa o conteúdo importante», «isto é informação complementar».

Pessoalmente, acredito que os landmarks são uma das melhorias de acessibilidade com maior impacto e menor esforço. Você não precisa redesenhar nada, não muda a aparência visual do seu site. Apenas adiciona estrutura semântica que torna a vida enormemente mais fácil para as pessoas que dependem de leitores de tela como NVDA, JAWS ou VoiceOver.

Os cinco landmarks fundamentais que todo site precisa

A especificação WAI-ARIA do W3C define vários papéis de landmark, mas há cinco que formam a espinha dorsal de qualquer site bem estruturado. Vamos vê-los em detalhe:

1. main: o coração do seu conteúdo

O landmark main identifica o conteúdo principal da página. Só deve haver um por página, e é onde o leitor de tela espera encontrar o que realmente importa. Se você usa a tag HTML5 <main>, o navegador atribui automaticamente o role="main". Não precisa duplicá-lo.

Alguma vez você procurou algo num site e teve que passar pelo menu, o logotipo, as redes sociais e três banners antes de chegar ao conteúdo? Para alguém com NVDA, essa experiência se multiplica por dez. Com um landmark main bem posicionado, o usuário pressiona uma tecla e salta diretamente ao conteúdo.

2. nav: o seu sistema de navegação

O landmark nav marca os blocos de navegação. Você pode ter vários numa página (navegação principal, navegação secundária, breadcrumbs), mas cada um deve ter um atributo aria-label ou aria-labelledby que o diferencie. A tag HTML5 <nav> carrega o role="navigation" implícito.

Um erro comum que encontro em auditorias de acessibilidade é ter três elementos <nav> sem nenhum rótulo. O usuário de JAWS ouve «navegação, navegação, navegação» sem saber qual é qual. Adicionar aria-label="Navegação principal" e aria-label="Breadcrumbs" resolve o problema em segundos.

3. header: o cabeçalho que orienta

O landmark header, quando é filho direto do body, torna-se o banner do site. Aqui fica o seu logotipo, o nome do site e tipicamente a navegação principal. Em HTML5, o elemento <header> dentro do body atua como role="banner".

Atenção: um <header> dentro de um <article> ou uma <section> não gera um landmark banner. Só o faz quando é filho direto do body ou de um elemento sem papel semântico. Isso confunde muitos desenvolvedores durante a remediação de acessibilidade web.

4. footer: informação de encerramento

O landmark footer, como filho direto do body, mapeia-se ao role="contentinfo". Aqui você coloca informação de copyright, links legais, dados de contato e políticas de privacidade. Assim como o header, só gera landmark quando está no nível superior do documento.

Segundo dados do WebAIM no seu relatório de acessibilidade de 2025, 68% dos sites têm um <footer> corretamente posicionado, mas apenas 41% adicionam rótulos descritivos quando há múltiplos footers. A diferença entre um footer correto e um acessível está nos detalhes.

5. aside: conteúdo complementar

O landmark aside marca conteúdo relacionado mas não essencial: barras laterais, widgets, publicidade, artigos relacionados. Em HTML5, <aside> mapeia-se automaticamente a role="complementary". É importante que esse conteúdo faça sentido fora do fluxo principal.

Você já se perguntou por que alguns blogs acessíveis colocam a barra lateral depois do conteúdo principal no DOM, embora visualmente apareça ao lado? É uma estratégia deliberada para que a ordem de tabulação lógica leve primeiro ao conteúdo importante e depois ao complementar.

Tabela de correspondência HTML5 e papéis ARIA

O skip link: acessibilidade com uma única tecla

O skip link (ou link para pular ao conteúdo) é um mecanismo que permite aos usuários de teclado e leitores de tela pular a navegação repetitiva e ir diretamente ao conteúdo principal. A WCAG 2.2 aborda isso no critério de sucesso 2.4.1 «Contornar blocos» com nível A.

A implementação é simples: um link no início do documento que aponta para o id do <main>. Normalmente é ocultado visualmente e só aparece quando recebe o foco por tabulação. Isso beneficia não apenas pessoas cegas, mas também quem navega exclusivamente com teclado por deficiências motoras.

Pessoalmente, considero o skip link como o teste de fogo da acessibilidade básica. Se o seu site não o tem, provavelmente há muitas outras coisas que faltam. É tão fundamental quanto o cinto de segurança num carro: simples, barato e salva vidas (digitais).

Estrutura de cabeçalhos e landmarks: a dupla perfeita

Os landmarks e a estrutura de cabeçalhos para acessibilidade são dois lados da mesma moeda. Os landmarks dividem a página em regiões funcionais; os cabeçalhos (h1-h6) criam uma hierarquia de conteúdo dentro dessas regiões. Juntos, oferecem dois sistemas de navegação complementares.

Um usuário de NVDA pode listar todos os landmarks com a tecla D ou abrir o diálogo de elementos com Insert+F7. Também pode navegar por cabeçalhos com a tecla H. Ter ambos os sistemas bem implementados é como oferecer tanto um índice quanto um mapa num livro: cada pessoa escolhe a forma que lhe é mais confortável.

O W3C recomenda que cada landmark tenha pelo menos um cabeçalho que o descreva. Assim, se o usuário navega por cabeçalhos, encontra a mesma estrutura que se navega por landmarks. Essa redundância não é um defeito; é uma característica do design acessível.

Ordem de tabulação lógica: quando o Tab faz sentido

A ordem de tabulação lógica é a sequência na qual os elementos interativos recebem o foco quando você pressiona a tecla Tab. Deve seguir um fluxo natural: de cima para baixo, da esquerda para a direita (em idiomas LTR), seguindo a estrutura visual da página. Os landmarks ajudam a organizar esse fluxo.

Um erro frequente na remediação de acessibilidade web é usar tabindex com valores positivos para «corrigir» a ordem de tabulação. Isso cria um caos total. A solução correta é organizar o HTML na mesma ordem em que deve ser tabulado. Se o seu DOM segue uma estrutura lógica com landmarks bem posicionados, a ordem de tabulação se resolve sozinha.

A WCAG 2.2 aborda isso no critério 2.4.3 «Ordem do foco» (nível A). Se a ordem de tabulação não segue uma sequência lógica, qualquer usuário de teclado se perderá, e um leitor de tela apresentará a informação numa ordem confusa.

Erros comuns ao implementar landmarks ARIA

Nas minhas auditorias de acessibilidade, encontro esses erros repetidamente:

• Múltiplos <main> na mesma página: só deve haver um visível de cada vez.
• Landmarks sem rótulo: quando há vários <nav> ou <aside>, cada um precisa de aria-label.
• Papéis ARIA redundantes: escrever <nav role="navigation"> é redundante. O papel já é implícito.
• Header e footer dentro de seções tratados como landmarks: só geram landmark no nível superior.
• Esquecer o skip link: o mecanismo mais simples e mais esquecido.
• Conteúdo fora de landmarks: todo o conteúdo visível deve estar dentro de algum landmark.

Segundo a pesquisa WebAIM Million de 2025, 23% das páginas iniciais analisadas não tinham um landmark main identificável, e 45% tinham landmarks mal rotulados. A boa notícia é que esses erros são fáceis de corrigir.

Como verificar os landmarks com leitores de tela

Verificar landmarks não requer ferramentas sofisticadas. Aqui explico como fazê-lo com os três leitores de tela mais utilizados:

Além disso, extensões de navegador como Landmarks de Matthew Tylee Atkinson (disponível para Chrome e Firefox) mostram os landmarks visualmente sobrepostos na página. É uma ferramenta gratuita e extremamente útil para desenvolvimento e testes.