5.1.1.5 - Requisito para cabeçalho e rótulos
Descrição
Deve haver cabeçalhos e rótulos para organizar a estrutura da aplicação. A aplicação deve estar estruturada por meio de elementos de cabeçalho em títulos de seção e rótulos em campos de entradas de dados, permitindo que usuários de tecnologia assistiva compreendam melhor sua organização. O uso desses recursos possibilita a localização do conteúdo de forma mais rápida.
Exemplo
Uma aplicação utiliza cabeçalhos para separar as principais áreas exibidas na tela e rótulos que descrevem o que é exigido nos campos interativos.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Ao criar a interface, utilize uma hierarquia visual clara com títulos e rótulos visíveis e bem posicionados, refletindo a estrutura lógica da aplicação.
Mostre a hierarquia com títulos visíveis
Os títulos devem refletir a organização da tela, do mais geral ao mais específico.
Certo: Hierarquia clara
anotação de especificação
Título da tela (nível 1) → seções "Dados pessoais" e "Endereço" (nível 2).
Errado: Títulos só no visual
anotação de especificação
Seções separadas apenas por negrito e cor, sem indicar nível de título.
Estruture o código com cabeçalhos semânticos (usando <h1>, <h2>, etc.) e associe rótulos a campos de formulário via HTML, como <label> e for, garantindo que leitores de tela interpretem corretamente a hierarquia e os dados inseridos.
Estrutura que o leitor de tela entende
Use elementos de título em ordem e ligue os rótulos aos campos.
Certo: Títulos semânticos em ordem
<h1>Minha conta</h1> <h2>Dados pessoais</h2> <h2>Endereço</h2>Leitor de tela anuncia: "Dados pessoais, título nível 2"
Errado: Texto estilizado como título
<div class="titulo">Minha conta</div> <b>Dados pessoais</b>Leitor de tela anuncia: "Dados pessoais": sem indicar que é título
Certo: Rótulo ligado ao campo
<label for="cep">CEP</label> <input id="cep">Leitor de tela anuncia: "CEP, campo de edição"
Errado: Nível de título pulado
<h1>Minha conta</h1> <h4>Endereço</h4>Leitor de tela anuncia: "Endereço, título nível 4": hierarquia confusa
Aprenda a fazer com conteúdos selecionados para você
Organize o fluxo de trabalho para garantir que os cabeçalhos e rótulos sejam revisados durante o processo de design e desenvolvimento, alinhando as equipes para garantir que a estrutura da aplicação favoreça tanto a acessibilidade quanto a usabilidade.
Revise a estrutura em cada entrega
Inclua a hierarquia de títulos e rótulos na revisão de design e de código.
Checklist do requisito 5.1.1.5: tela "Minha conta"
- nível 1 único
Título principal
título de seção
- nível 2 em ordem
Seções do formulário
título de seção
- pendente
Campos de endereço
rótulo
2 de 3 itens em conformidade, 1 pendente de revisão.
Hierarquia de cabeçalhos
Assegure-se de que a estrutura de cabeçalhos (por exemplo, h1 a h6 no HTML) siga uma hierarquia lógica que reflita a organização da interface, como títulos de seções e subseções, para que os leitores de tela possam interpretar corretamente a estrutura. Isso facilita a navegação dos usuários entre as seções de conteúdo.
Rótulos claros e associados
Verifique se cada campo de entrada possui rótulos bem definidos e programaticamente associados, como com o uso do atributo for em formulários HTML ou aria-labelledby para componentes interativos, para que tecnologias assistivas possam identificar e ler corretamente o propósito de cada campo.
Navegação e localização rápida
Teste a navegação com tecnologias assistivas para confirmar que os cabeçalhos e rótulos permitem aos usuários localizar facilmente o conteúdo desejado, aprimorando a experiência de uso para aqueles que navegam apenas pelo teclado ou com leitores de tela.
Navegue pelos títulos
Use a navegação por títulos do leitor de tela e confira se ela resume a tela.
Certo: Estrutura navegável
"Minha conta, título nível 1"
"Dados pessoais, título nível 2"
"Endereço, título nível 2"
Pulando entre títulos, a pessoa entende a tela.
Errado: Sem títulos
"Nenhum título encontrado"
seções visuais ignoradas
A pessoa precisa ouvir a tela inteira para achar o que procura.
Garanta que os títulos e rótulos inseridos sejam claros, descritivos e correspondam ao propósito do conteúdo, ajudando os usuários a localizar e entender as informações com rapidez e precisão. Os títulos podem servir como cabeçalhos para dividir as seções da página, tornando mais fácil para o usuário compreender o conteúdo da aplicação.
Escreva títulos que resumam a seção
O título deve dizer o que a pessoa vai encontrar logo abaixo.
Certo: Título descritivo
título da seção
"Endereço de entrega"
Diz exatamente o conteúdo.
Errado: Título genérico
título da seção
"Informações" · "Outros" · "Seção 2"
Não ajuda a localizar o conteúdo.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.