Uso de regiões
O que a norma pede
As regiões organizam o conteúdo de acordo com o tipo: navegação na região de navegação, conteúdo principal na principal, e assim por diante.
- 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:
Agrupe no leiaute os itens de mesmo tipo e não misture navegação e conteúdo num mesmo bloco. Revise as áreas que recebem de tudo, porque confundem quem salta de região em região.
Barra lateral
A barra lateral recebe links, avisos e o formulário principal.
Errado: Tudo na lateral
No leiaute
Formulário de inscrição (a tarefa principal) na barra lateral.
Quem salta para o principal não acha o formulário.
Certo: Cada coisa em seu lugar
No leiaute
Formulário no conteúdo principal; links relacionados na lateral.
As regiões dizem a verdade sobre o conteúdo.
Faça cada região envolver o conteúdo que corresponde a ela: nav só para blocos de navegação e main com o conteúdo principal inteiro. Use aside para o complementar, nunca para o principal.
Navegação estrutural
O breadcrumb e o conteúdo da página.
Errado: Região errada
<nav> <h1>Emitir certidão</h1> <p>Para emitir a certidão…</p> </nav>O conteúdo principal é anunciado como navegação.
Certo: Região certa
<nav aria-label="Você está em">…</nav> <main> <h1>Emitir certidão</h1> <p>Para emitir a certidão…</p> </main>Cada região contém o que diz conter.
Inclua nos critérios de aceite que o conteúdo principal esteja dentro de main e revise o uso de regiões nos novos templates. Uma região mal usada leva a pessoa ao lugar errado quando ela confia no atalho.
Novo template de notícias
O template reorganiza a página de notícias.
Errado: Sem revisão de regiões
Entrega
Texto da notícia dentro de um aside.
Quem usa leitor de tela não acha a notícia.
Certo: Com revisão
Entrega
Critério: notícia em main, relacionadas em aside.
A estrutura corresponde ao conteúdo.
Salte para cada região com o leitor de tela e confira se o conteúdo lido corresponde ao tipo anunciado. Ao saltar para “Principal”, você deve chegar ao conteúdo central da página.
Salto para o principal
O leitor de tela salta para a região principal.
Errado: Cai no lugar errado
“Principal” → “Links úteis, lista, 12 itens”
O principal contém a lista de links, e não o conteúdo.
Certo: Cai no conteúdo
“Principal” → “Emitir certidão, cabeçalho nível 1”
O atalho leva ao que importa.
Ao montar páginas em blocos, coloque o texto do serviço na área de conteúdo e use a área lateral para “veja também” e contatos. Evite blocos de navegação no meio do texto.
Montagem da página
O gerenciador oferece as áreas “Conteúdo” e “Lateral”.
Errado: Área escolhida pela aparência
No gerenciador
Passo a passo do serviço na “Lateral”, porque ficava mais visível.
A informação principal fica numa região complementar.
Certo: Área escolhida pelo tipo
No gerenciador
Passo a passo em “Conteúdo”; contatos em “Lateral”.
Estrutura e conteúdo combinam.