Componentes com nome acessível
O que a norma pede
Todo componente que precisa ser identificado por um nome (botões, links, campos, regiões, frames) tem nome acessível.
- 4.1.2 (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:
Nomeie no protótipo cada componente interativo, inclusive os que são só ícone, como alternadores e botões de menu.
Alternador de tema
Um interruptor muda para o tema escuro.
Errado: Sem nome
Na especificação
Interruptor com ícones de sol e lua.
O leitor anuncia “interruptor, desligado”.
Certo: Com nome
Na especificação
Interruptor “Tema escuro”.
O leitor anuncia “Tema escuro, interruptor, desligado”.
Garanta um nome acessível em todo elemento com papel interativo, vindo do texto visível ou de aria-label. Nos componentes da biblioteca, torne o nome uma propriedade obrigatória.
Interruptor de tema
Implementação do componente.
Errado: Sem nome
<button role="switch" aria-checked="false">🌙</button>Nome = emoji ou vazio.
Certo: Com nome
<button role="switch" aria-checked="false"> <span aria-hidden="true">🌙</span> Tema escuro </button>Nome e estado claros.
Inclua a verificação automática de nomes no processo de entrega e exija nomes nos componentes de bibliotecas contratadas. Componente sem nome é invisível para quem usa leitor de tela.
Relatório automático
A ferramenta encontra 120 controles sem nome.
Errado: Correção página a página
Plano
Corrigir conforme as páginas forem editadas.
Demora e fica inconsistente.
Certo: Correção no componente
Plano
Os 120 vêm de 4 componentes; corrigir os 4.
Resolvido de uma vez.
Rode a verificação automática e percorra os controles com o leitor de tela. Registre os componentes anunciados só pelo papel, como “botão” sem nome.
Interruptor de tema
Teste com leitor.
Errado: Sem nome
Leitor de tela anuncia: “Interruptor, desligado”
Não se sabe o que liga.
Certo: Com nome
Leitor de tela anuncia: “Tema escuro, interruptor, desligado”
Atende.
Forneça nomes curtos e claros para os componentes que só têm ícone, com verbos para botões, e mantenha esses nomes no glossário do produto.
Nome do controle de legenda
Botão que liga legendas no vídeo.
Errado: Sigla
Nome
“CC”
Nem todos conhecem a sigla.
Certo: Claro
Nome
“Legendas”
Compreensível para todos.