Semântica de região
O que a norma pede
As áreas da página estão marcadas no código com o tipo de região que correspondem à sua função, como cabeçalho, navegação, conteúdo principal e rodapé.
- 1.3.1 (A)
- 1.3.6 (AAA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Nomeie na especificação as regiões do leiaute, como cabeçalho, navegação, conteúdo principal e rodapé, e mantenha cada uma no mesmo lugar em todas as páginas. Identifique o formulário de busca do site como região de busca.
Leiaute da página interna
O leiaute tem topo, menu lateral, conteúdo e rodapé.
Errado: Blocos sem função
Na especificação
Bloco A, Bloco B, Bloco C, Bloco D
O código não sabe o papel de cada área.
Certo: Regiões nomeadas
Na especificação
Cabeçalho (banner), Navegação, Principal (main), Rodapé (contentinfo)
Cada área vira uma região navegável.
Monte o leiaute com os elementos header, nav, main, aside e footer, que já criam as regiões para o leitor de tela. Use search ou role="search" no formulário de busca e evite role manual quando o elemento nativo resolve.
Estrutura do leiaute
O esqueleto de todas as páginas.
Errado: Só divs
<div class="topo">…</div> <div class="menu">…</div> <div class="conteudo">…</div>Não há regiões para saltar.
Certo: Elementos de região
<header>…</header> <nav aria-label="Principal">…</nav> <main>…</main> <footer>…</footer>O leitor lista e salta entre as regiões.
Garanta que o leiaute base use regiões semânticas e inclua essa verificação no teste automático. Corrigido uma vez no template, o problema some de todas as páginas.
Leiaute base do portal
Todas as páginas herdam o mesmo leiaute.
Errado: Correção página a página
Plano
Adicionar regiões em cada página conforme forem editadas.
Leva anos e fica inconsistente.
Certo: Correção no leiaute
Plano
Ajustar o leiaute base numa única entrega.
Todas as páginas ganham regiões de uma vez.
Abra com o leitor de tela a lista de regiões da página e confira se cada área visível aparece, com o tipo que combina com o conteúdo dela.
Lista de regiões
O leitor de tela lista os marcos da página.
Errado: Nenhuma região
Leitor de tela anuncia: “Nenhum marco encontrado”
A pessoa não consegue saltar para o conteúdo.
Certo: Regiões presentes
“Banner”
“Navegação Principal”
“Principal”
“Informações de conteúdo”
O leiaute está mapeado.
Coloque a informação principal de cada página no corpo dela, e não na barra lateral ou no rodapé. Use a barra lateral só para conteúdo complementar.
Horário de atendimento
A página do serviço precisa informar o horário.
Errado: Só no rodapé
Na página
Horário aparece apenas no rodapé geral do site.
Quem salta para o conteúdo principal não encontra.
Certo: No conteúdo principal
Na página
Seção “Horário de atendimento” no corpo da página.
A informação está onde se espera.