Texto visível no nome acessível
O que a norma pede
O nome acessível de cada componente é igual ao texto visível dele (ou do seu rótulo), ou pelo menos contém esse texto, de preferência no início.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: o nome acessível é igual ao texto visível do componente ou do rótulo.
- Outra forma: o nome acessível contém o texto visível, de preferência no começo.
- 2.5.3 (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:
Mantenha o nome acessível de cada controle igual ao texto visível e, se precisar complementar, comece pelo texto visível. Quem usa comando de voz diz o que vê, como “clicar em Enviar”.
Botão “Enviar”
O botão final do formulário.
Errado: Nome diferente
Na especificação
Texto visível “Enviar”; nome acessível “Submeter formulário de cadastro”.
“Clicar em Enviar” não funciona por voz.
Certo: Nome começa pelo visível
Na especificação
Texto “Enviar”; nome “Enviar cadastro”.
O comando de voz encontra o botão.
Evite aria-label em elementos que já têm texto visível, porque ele substitui esse texto no nome acessível. Se precisar usá-lo, comece pelo texto visível, ou prefira aria-labelledby apontando para ele.
Botão de busca
Botão com texto “Buscar”.
Errado: aria-label diferente
<button aria-label="Pesquisar no portal">Buscar</button>O nome não contém “Buscar”.
Certo: Nome igual ao visível
<button>Buscar</button>Nome e texto coincidem.
Inclua no padrão de componentes a coincidência entre o texto visível e o nome acessível e use a verificação automática, que aponta divergências. Nomes diferentes impedem o uso por comando de voz.
Tradução de interface
A interface foi traduzida, mas os aria-label não.
Errado: Rótulos antigos
Situação
Texto visível em português; aria-label em inglês.
Voz e leitor não encontram os controles.
Certo: Rótulos alinhados
Situação
aria-label removidos ou traduzidos junto.
Tudo coincide.
Compare o texto visível de cada controle com o nome anunciado pelo leitor de tela e teste comandos de voz com o texto visível. Registre os nomes que não contêm esse texto.
Botão “Buscar”
Teste com comando de voz.
Errado: Comando falha
Voz: “clicar em Buscar”
Sistema: “Não encontrado”
Nome divergente.
Certo: Comando funciona
Voz: “clicar em Buscar”
Busca executada
Atende.
Ao revisar o texto de um botão, peça ao time que atualize também o nome acessível. Mantenha o texto visível autoexplicativo.
Mudança de texto do botão
“Enviar” virou “Concluir inscrição”.
Errado: Só o visível mudou
Revisão
Nome acessível continua “Enviar”.
Voz e leitor divergem do visual.
Certo: Tudo mudou
Revisão
Nome acessível atualizado para “Concluir inscrição”.
Coerente.