Uso de cabeçalhos
O que a norma pede
Cabeçalhos são usados só para identificar seções de conteúdo, e não para dar destaque visual a textos que não abrem uma seção.
- 1.3.1 (A)
- 2.4.6 (AA)
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:
Crie estilos de destaque que não sejam de cabeçalho e reserve os estilos de título para o início de seções. Revise cards e banners que usam estilo de título sem abrir uma seção.
Destaque do valor da taxa
O valor da taxa precisa aparecer grande na página.
Errado: Valor como título
Na especificação
“R$ 45,00” — H2.
O valor aparece na lista de seções como se fosse um assunto.
Certo: Valor com estilo de destaque
Na especificação
“R$ 45,00” — estilo Destaque (não é cabeçalho).
Destaque visual sem confundir a estrutura.
Não use h1 a h6 só para aumentar a fonte: o tamanho vem do CSS e o elemento diz o papel do texto. Para destaques, use p ou strong com uma classe, e evite cabeçalhos vazios.
Aviso de prazo
Um aviso curto em destaque no topo do formulário.
Errado: Cabeçalho para destacar
<h3>Atenção!</h3>Cria uma “seção” que não existe.
Certo: Destaque sem cabeçalho
<p class="aviso"><strong>Atenção:</strong> o prazo termina em 30/06.</p>O aviso se destaca e a estrutura continua correta.
Defina no padrão de conteúdo quando usar título e quando usar destaque, e revise os templates reaproveitados em muitas páginas. Cabeçalhos usados como enfeite funcionam como um sumário com itens que não levam a lugar nenhum.
Template de card
Um card é usado em centenas de páginas.
Errado: Cada card com três cabeçalhos
Situação
Título, data e categoria marcados como h3.
A lista de cabeçalhos fica enorme e confusa.
Certo: Só o título é cabeçalho
Situação
Título em h3; data e categoria em texto.
A navegação por cabeçalhos volta a ser útil.
Leia a lista de cabeçalhos como se fosse um sumário: cada item deve ser o nome de uma seção. Registre itens como “Atenção!”, valores soltos e cabeçalhos vazios.
Lista de cabeçalhos da página de taxas
O leitor de tela lista os cabeçalhos.
Errado: Itens sem sentido
“Taxas, nível 1”
“R$ 45,00, nível 2”
“Atenção!, nível 3”
A lista não serve de sumário.
Certo: Sumário útil
“Taxas, nível 1”
“Quanto custa, nível 2”
“Como pagar, nível 2”
Cada cabeçalho nomeia uma seção.
Use título só quando começar um novo assunto; para chamar atenção, use negrito ou um bloco de aviso. Lidos em sequência, os títulos do texto devem formar um sumário.
Aviso importante no meio do texto
É preciso destacar que o serviço é gratuito.
Errado: Título como destaque
No editor
Título 2: “O serviço é gratuito!”
Vira uma seção sem conteúdo.
Certo: Destaque no texto
No editor
Parágrafo: “**O serviço é gratuito.**”
O destaque aparece sem quebrar a estrutura.