Semântica de cabeçalho
O que a norma pede
Todo texto que funciona como cabeçalho está marcado no código como cabeçalho, e não só com aparência de título.
- 1.3.1 (A)
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:
Anote no protótipo o nível de cada título, de H1 a H3 ou mais, e ligue os estilos de texto do sistema de design a esses níveis. Um texto grande e em negrito só é título para o leitor de tela quando é marcado como tal.
Página de um serviço
A página tem título e seções “Quem pode pedir” e “Documentos”.
Errado: Só aparência
Na especificação
“Quem pode pedir” — estilo: 24px, negrito.
Não se sabe que é um cabeçalho de seção.
Certo: Nível indicado
Na especificação
“Quem pode pedir” — H2, estilo Título 2.
O desenvolvimento marca o cabeçalho corretamente.
Marque os cabeçalhos com os elementos h1 a h6, e não com div estilizada. Nos componentes, permita escolher o nível do cabeçalho por propriedade, separado da aparência.
Título de seção
A seção “Documentos necessários”.
Errado: Div estilizada
<div class="titulo-grande">Documentos necessários</div>O leitor não reconhece o cabeçalho.
Certo: Cabeçalho de verdade
<h2 class="titulo-grande">Documentos necessários</h2>Aparece na lista de cabeçalhos e pode ser encontrado.
Inclua a marcação de cabeçalhos nos critérios de aceite das páginas de conteúdo e garanta que o editor ofereça níveis de título, e não só negrito. Quem usa leitor de tela costuma navegar primeiro pelos cabeçalhos.
Editor do portal
Quem publica usa um editor de texto no gerenciador de conteúdo.
Errado: Só formatação
Situação
Editor com botões de tamanho e negrito, sem níveis de título.
Nenhuma página publicada tem cabeçalhos reais.
Certo: Níveis no editor
Situação
Editor com “Título 2” e “Título 3”.
Os cabeçalhos passam a existir no código.
Abra a lista de cabeçalhos com o leitor de tela ou com uma extensão do navegador e compare com os títulos que você vê. Registre os títulos visuais que não aparecem na lista.
Lista de cabeçalhos da página
O leitor de tela lista os cabeçalhos do serviço.
Errado: Lista incompleta
“Emitir carteira de identidade, nível 1”
(nenhum outro cabeçalho)
As seções não aparecem.
Certo: Lista completa
“Emitir carteira de identidade, nível 1”
“Quem pode pedir, nível 2”
“Documentos, nível 2”
A pessoa vê a estrutura da página.
Abra cada seção com a ferramenta de título do editor, como “Título 2”, e não com negrito ou letras maiores. Escreva títulos que digam o assunto da seção.
Seções de uma notícia longa
A notícia tem três partes.
Errado: Negrito no lugar de título
No editor
**Como participar** (parágrafo em negrito)
Parece título, mas não é.
Certo: Título do editor
No editor
Título 2: “Como participar”
A seção vira um cabeçalho navegável.