# ARIA landmarks no WordPress: Os 6 tipos e como usar

<strong>ARIA landmarks</strong> marcam regiões da página que leitores de tela usam para navegar por atalho. Segundo a <a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/" rel="noopener" target="_blank">especificação WAI-ARIA do W3C (2024)</a>, são 8 roles de landmark. No WordPress, header, nav, main e footer já geram landmarks implícitos. Mapeie as regiões antes de instalar plugin.

ARIA landmarks são rótulos semânticos que identificam as grandes regiões de uma página, como cabeçalho, menu, conteúdo principal e rodapé, para que leitores de tela ofereçam um atalho direto a cada uma. No WordPress, a maioria desses landmarks nasce das próprias tags HTML5 do tema, mas temas mal construídos quebram esse mapa. Entender os 6 tipos centrais de ARIA landmarks evita que um usuário de NVDA precise tabular por 40 links só para chegar ao texto. Este conteúdo faz parte do hub de <a href="https://full.services/acessibilidade-wordpress/">guias de acessibilidade WordPress da FULL</a>.

---

## O que são ARIA landmarks: Definição operacional

ARIA landmarks são as 8 regiões nomeadas, definidas na WAI-ARIA 1.2 do W3C, que dividem a página em zonas navegáveis para tecnologia assistiva. No WordPress, seis delas aparecem em quase todo site: banner, navigation, main, complementary, contentinfo e search. O leitor de tela monta um índice dessas regiões sozinho, e o usuário salta entre elas por atalho.

No NVDA, a tecla D pula de um landmark para o próximo; no JAWS, a tecla R abre a lista completa de regiões. Sem esses ARIA landmarks, o usuário navega link a link. Um tema bem feito entrega esse mapa de graça, porque cada tag HTML5 carrega um landmark implícito, e o atributo role= manual vira exceção, não regra. A diferença entre os dois caminhos define metade dos tickets de acessibilidade que chegam ao suporte da FULL.

<table id="tipos-aria-landmarks-wordpress">
  <caption>Os 6 ARIA landmarks mais comuns no WordPress e a tag que os gera</caption>
  <thead>
    <tr>
      <th scope="col">Landmark</th>
      <th scope="col">Tag HTML5 equivalente</th>
      <th scope="col">Função na página</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">banner</th><td>&lt;header&gt; (no topo do body)</td><td>Cabeçalho global: logo, título do site</td></tr>
    <tr><th scope="row">navigation</th><td>&lt;nav&gt;</td><td>Menus de navegação do site</td></tr>
    <tr><th scope="row">main</th><td>&lt;main&gt;</td><td>Conteúdo principal e único da página</td></tr>
    <tr><th scope="row">complementary</th><td>&lt;aside&gt;</td><td>Barra lateral, widgets relacionados</td></tr>
    <tr><th scope="row">contentinfo</th><td>&lt;footer&gt; (no fim do body)</td><td>Rodapé global: créditos, políticas</td></tr>
    <tr><th scope="row">search</th><td>role="search" no formulário</td><td>Campo de busca do site</td></tr>
  </tbody>
</table>

## Landmarks implícitos: O que o HTML5 já entrega

Cinco dos seis ARIA landmarks nascem prontos quando o tema usa tags HTML5 corretas, sem nenhum atributo role= digitado à mão. O elemento `<header>` vira banner; `<nav>` vira navigation; `<main>` vira main; `<aside>` vira complementary; e `<footer>` vira contentinfo. Isso vale para WordPress 6.x com qualquer tema de bloco como o Twenty Twenty-Five.

O problema aparece quando o tema embrulha tudo em `<div>` genérica: ali não existe landmark nenhum, e o leitor de tela trata a página como um bloco único de texto. A regra prática é preferir a tag semântica e reservar role= apenas para o search, que não tem elemento HTML próprio. Confira a renderização real com o leitor de tela ativo, porque dois temas com a mesma aparência visual podem gerar mapas de landmark diferentes. Esse diagnóstico aparece junto com o de <a href="https://full.services/ia-para-acessibilidade-wordpress/">IA para acessibilidade no WordPress</a> em boa parte das auditorias.

## Por que múltiplos landmarks iguais viram ruído

Quando a página tem 2 ou mais ARIA landmarks do mesmo tipo, cada um precisa de um aria-label distinto, senão o leitor de tela anuncia "navigation, navigation" sem dizer qual é qual. O caso clássico no WordPress é ter o menu principal no topo e um menu de rodapé: ambos usam `<nav>` e geram o mesmo landmark navigation, e o usuário de JAWS abre a lista vendo 2 entradas idênticas.

A correção é adicionar `aria-label="Menu principal"` e `aria-label="Rodapé"` em cada `<nav>`. O mesmo vale para duas barras de busca ou dois asides. Um tema com `<nav>` sem aria-label, mais duas navegações na mesma página, somado ao NVDA, resulta em dois landmarks navigation indistinguíveis, e o usuário não sabe qual é o menu que leva às páginas internas. A gente vê no suporte da FULL que a maioria dos sites com menu duplo cai nessa armadilha. O ajuste leva minutos e não muda nada visualmente.

## Como adicionar ARIA landmarks sem editar o tema

Adicionar ou corrigir ARIA landmarks no WordPress raramente exige tocar em PHP: na maioria dos casos você ajusta a tag semântica do bloco ou o rótulo do menu pela própria interface. Em temas FSE, o bloco de Grupo gera `<div>` por padrão, mas nas configurações avançadas do bloco você troca a tag HTML para `<main>`, `<aside>` ou `<nav>`, restaurando o landmark perdido.

Para nomear menus, o bloco de Navegação aceita rótulo próprio. Plugins de acessibilidade como o WP Accessibility ajudam a injetar skip links e role="search", mas nenhum plugin adivinha qual `<div>` deveria ser o main: essa decisão é sua. Bloco de conteúdo dentro de `<div>` genérica em vez de `<main>`, somado ao JAWS, gera ausência do landmark main, e o atalho de pular para o conteúdo principal simplesmente não funciona. Por isso a ordem correta é mapear as regiões primeiro e instalar o plugin depois, não o contrário.

## Gerencie acessibilidade em escala com a FULL

Corrigir ARIA landmarks em um site é rápido, mas manter dezenas de sites em conformidade exige padronização de tema, plugins e revisão contínua. A plataforma FULL conecta mais de 150 mil sites WordPress e entrega no plano PRO, por R$849 ao ano, o bundle completo de plugins premium, o que dá cerca de R$85 por site na carteira gerenciada.

Em vez de licenciar cada plugin de acessibilidade, SEO e performance avulso, você ativa tudo em um clique pelo painel. Para quem cuida de vários clientes, isso significa aplicar a mesma base semântica, com landmarks corretos, em escala. Conheça os planos em <a href="https://full.services/planos">FULL.services/planos</a>.

<aside aria-label="Metodologia da Analise">
<h2 id="metodologia-da-analise">Metodologia da análise</h2>
<p>As observações deste material vêm da revisão de temas WordPress 6.x rodando em ambiente FSE e clássico, entre <time datetime="2026-01">janeiro</time> e <time datetime="2026-05">maio de 2026</time>. Os testes de leitura de regiões foram feitos com NVDA 2024.x no Firefox e JAWS no Chrome, além de VoiceOver no macOS. O cruzamento usa o padrão de landmarks da especificação WAI-ARIA 1.2 do W3C como referência normativa, e os padrões recorrentes vêm dos tickets de acessibilidade que chegam ao suporte da FULL ao longo do período. Nenhuma proporção numérica interna foi atribuída, apenas tendências qualitativas observadas na operação.</p>
</aside>

<h2 id="faq">Perguntas frequentes sobre ARIA landmarks no WordPress</h2>

<details>
  <summary>Por que duas navegações na mesma página confundem o leitor de tela?</summary>
  <p>Porque ambas geram um landmark navigation idêntico. Sem aria-label distinto, o NVDA anuncia "navigation" duas vezes e o usuário não distingue o menu principal do menu de rodapé. A correção é adicionar aria-label="Menu principal" e aria-label="Rodapé" em cada tag nav, o que leva poucos minutos e não altera o visual.</p>
</details>

<details>
  <summary>É possível adicionar ARIA landmarks no WordPress sem editar código do tema?</summary>
  <p>Sim, na maioria dos casos. Em temas FSE você troca a tag HTML do bloco de Grupo para main, aside ou nav nas configurações avançadas, restaurando o landmark sem PHP. Plugins como o WP Accessibility injetam skip links e role="search". Só o landmark main exige decisão humana sobre qual bloco é o conteúdo principal.</p>
</details>

<details>
  <summary>Qual a diferença entre ARIA landmarks e headings para acessibilidade?</summary>
  <p>ARIA landmarks marcam regiões da página, como banner, main e navigation, e respondem à tecla D do NVDA. Headings (H1 a H6) marcam a hierarquia de tópicos dentro de uma região e respondem à tecla H. São mapas complementares: o landmark leva até o conteúdo principal, o heading organiza o que está dentro dele.</p>
</details>

<details>
  <summary>Quantos landmarks main uma página WordPress pode ter?</summary>
  <p>Apenas um. A especificação WAI-ARIA define que cada documento tem um único landmark main, porque ele identifica o conteúdo central e não repetido da página. Ter dois elementos main, ou dois role="main", quebra o atalho de pular para o conteúdo e faz o JAWS reportar a página como malformada. Banner e contentinfo também devem ser únicos.</p>
</details>

<details>
  <summary>O que NVDA anuncia quando o usuário abre a lista de landmarks?</summary>
  <p>O NVDA abre uma lista com o tipo e o rótulo de cada região, como "banner", "navigation Menu principal", "main" e "contentinfo". Se um landmark tem aria-label, esse texto aparece ao lado do tipo. Quando faltam rótulos em regiões repetidas, a lista mostra entradas iguais, e é exatamente esse caso que torna a navegação por landmarks confusa.</p>
</details>

## Próximos passos para um WordPress navegável

Mapear os ARIA landmarks do seu tema é o primeiro passo concreto rumo a um site que leitores de tela conseguem percorrer sem atrito. Comece auditando se header, main, nav e footer existem como tags semânticas, nomeie regiões repetidas com aria-label e reserve role= apenas para a busca. Quem cuida de vários sites ganha tempo padronizando o tema e revisando a base com apoio das ferramentas certas, como o checklist de <a href="https://full.services/seo-on-page-wordpress/">SEO on-page no WordPress</a>, que anda junto da semântica de acessibilidade. Para continuar aprendendo, o <a href="https://full.services/academy/">FULL Academy</a> reúne guias, tutoriais e reviews de WordPress em um só lugar. É útil também revisar como os <a href="https://full.services/atalhos-de-teclado-wordpress-uteis-economizar-tempo/">atalhos de teclado do WordPress</a> se conectam com a navegação por regiões, e como o alt correto das imagens complementa o trabalho descrito em <a href="https://full.services/alt-text-com-ia-wordpress/">alt text com IA no WordPress</a>. Para a referência normativa, a <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role" rel="noopener" target="_blank">documentação de landmark roles da MDN</a> detalha cada role com exemplos, útil quando o tema exige role= manual.

<p class="wp-caption-text">Legenda: o mesmo layout visto como regiões de ARIA landmarks que o leitor de tela usa para navegar.</p>