5.1.1.4 - Requisito para elementos interativos e de interface
Descrição
Elementos interativos e de interface do usuário devem ter rótulos que descrevem o elemento, sua funcionalidade, estado ou operação. Elementos de interface interativos, como botões e campos de formulário, devem conter um rótulo que descreve a sua função. Os rótulos devem estar relacionados com o elemento por meio de código de programação. Nem todos os elementos possuem todas essas características, mas eles devem ser compreensíveis para a operação do usuário.
Exemplo
Um campo de formulário que exige o nome do usuário precisa ter um rótulo “Nome” relacionado ao campo que exige a entrada de texto.
Desempenho funcional
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Assegure que todos os componentes interativos e de interface usados tenham rótulos claros e informativos, explicando a função ao usuário de forma que ele compreenda de forma familiar, concreta, com linguagem que lhe é adequada.
Dê um rótulo visível a cada elemento interativo
Todo campo, botão e ícone clicável precisa de um texto que diga o que ele faz.
Certo: Campo com rótulo
anotação de especificação
Rótulo "Nome completo" acima do campo de texto.
Errado: Campo só com placeholder
anotação de especificação
Placeholder "Digite aqui", que some ao digitar e não diz o que é pedido.
Certo: Ícone com texto
anotação de especificação
Ícone de lixeira + texto "Excluir".
Errado: Ícone sozinho
anotação de especificação
Só o ícone de lixeira, sem texto nem nome definido para o leitor de tela.
Codifique os rótulos de maneira que estejam diretamente associados aos elementos interativos, usando atributos como aria-label ou aria-labelledby, conforme necessário. Isso assegura a correta interpretação dos rótulos por tecnologias assistivas.
O que o leitor de tela anuncia
O rótulo precisa estar ligado ao elemento no código, não apenas próximo na tela.
Certo: Rótulo associado ao campo
<label for="nome">Nome</label> <input id="nome" type="text">Leitor de tela anuncia: "Nome, campo de edição"
Errado: Texto solto ao lado do campo
<span>Nome</span> <input type="text">Leitor de tela anuncia: "campo de edição": sem dizer qual
Certo: Botão de ícone com nome
<button aria-label="Fechar"> <svg aria-hidden="true">…</svg> </button>Leitor de tela anuncia: "Fechar, botão"
Errado: Botão de ícone sem nome
<button> <svg>…</svg> </button>Leitor de tela anuncia: "botão": sem função
Aprenda a fazer com conteúdos selecionados para você
Garanta que a equipe configure rótulos para todos os elementos interativos e revise a aplicação para verificar se todos os componentes possuem rótulos informativos.
Acompanhe os rótulos por tela
Liste os elementos interativos de cada tela e confira se todos têm rótulo.
Checklist do requisito 5.1.1.4: tela "Cadastro"
- rótulo associado
Campo Nome
campo de formulário
- nome acessível
Botão Fechar (ícone X)
botão
- pendente
Seletor de país
controle
2 de 3 elementos com rótulo, 1 pendente de revisão.
Clareza e precisão dos rótulos
Valide se todos os elementos interativos (botões, campos de formulário, ícones, etc.) possuem rótulos que descrevem claramente sua funcionalidade e estado. Cada rótulo deve ser informativo e direto para que os usuários compreendam o propósito do elemento sem ambiguidade.
Associação programática
Verifique se os rótulos estão corretamente vinculados aos elementos interativos por meio de código, como o uso de aria-label, aria-labelledby, for (em rótulos de formulário), ou outras práticas de acessibilidade programática. Esse vínculo garante que tecnologias assistivas leiam corretamente os rótulos durante a navegação.
Consistência na navegação assistiva
Teste a navegação com leitores de tela e outros recursos de acessibilidade para assegurar que os rótulos dos elementos interativos estejam claros e que a descrição da funcionalidade, estado ou operação do elemento seja facilmente compreendida. Certifique-se de que os rótulos sejam consistentes e acessíveis em diferentes fluxos de navegação.
Navegue pelos controles com leitor de tela
Percorra a tela e confira se cada controle é anunciado com nome, função e estado.
Certo: Controles bem rotulados
"Nome, campo de edição"
"Receber novidades, caixa de seleção, marcada"
"Enviar cadastro, botão"
Cada controle diz o que é e o que faz.
Errado: Controles sem rótulo
"campo de edição"
"caixa de seleção, não marcada"
"botão"
Não dá para saber o que preencher nem o que o botão faz.
Defina textos de rótulos compreensíveis, resumidos e descritivos para cada campo de formulário, botões e outros elementos interativos, explicando a função ou o estado quando aplicável, a ser aplicado por meio de código de programação.
Escreva rótulos que expliquem a função
Use palavras que a pessoa usuária reconhece e diga o que o elemento faz.
Certo: Rótulo claro
rótulo do botão
"Salvar alterações"
Diz a ação e o resultado.
Errado: Rótulo vago
rótulo do botão
"OK" · "Clique" · "Submit"
Genérico, ou em outro idioma.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.