Rótulo no nome

A Silktide compara o texto que os visitantes veem em botões e links com o nome que a tecnologia assistiva usa para o mesmo controle. Quando os dois não coincidem, as pessoas que operam sites por voz não conseguem ativar o controle dizendo o que veem.

Por que isso importa

Usuários de reconhecimento de fala olham para a tela e dizem o que veem: "clique em Enviar". O software compara essas palavras com o de cada controle — o nome usado pela . Atributos como aria-label substituem esse nome, então um botão que exibe "Enviar", mas tem o rótulo aria-label="Submit", só responde a "clique em Submit". A palavra visível falha silenciosamente, e o usuário não tem como descobrir o nome oculto que deveria dizer.

Essa incompatibilidade também confunde usuários de que trabalham com colegas videntes e ouvem um nome diferente daquele que a pessoa ao lado vê.

Este é o critério de sucesso 2.5.3 da (Rótulo no nome), um requisito de — parte do nível de conformidade mais básico.

Como corrigir

Remova a substituição de quando ela não acrescentar nada: um botão cujo texto visível já diz o que ele faz não precisa de aria-label.
Quando a substituição acrescentar contexto, comece com o texto visível: aria-label="Read more about pricing" para um link "Leia mais" mantém o comando de voz funcionando.
Nunca use aria-label para dizer algo diferente do texto visível.

<!-- Problema: diz "Send", mas responde a "Submit" -->
<button aria-label="Submit">Send</button>

<!-- Correção: texto visível incluído no nome acessível -->
<button aria-label="Send message">Send</button>

<!-- Correção mais simples: nenhuma substituição -->
<button>Send</button>

Como a Silktide faz esta verificação

Encontra os botões e links visíveis em cada página, incluindo elementos com uma função ARIA de button ou link.
Testa apenas controles que substituem seu nome com aria-label ou aria-labelledby — sem uma substituição, o texto visível é o nome acessível e o critério é automaticamente atendido.
Lê o rótulo visível do controle: seu conteúdo de texto mais o de quaisquer imagens dentro dele. Rótulos com menos de 2 caracteres são ignorados, assim como controles com nome acessível vazio (um problema separado coberto por outras verificações).
Normaliza as duas strings — convertendo para minúsculas, agrupando espaços e removendo pontuação decorativa — e então exige que o rótulo visível apareça dentro do nome acessível.
Para links em estilo de cartão que contenham um título e texto de apoio, aceita o título como rótulo, pois esse é o texto que um visitante naturalmente diria.

Solução de problemas

O nome acessível é mais longo que o texto visível

Tudo bem, desde que o texto visível apareça nele. A WCAG recomenda que o nome acessível comece com o texto visível, mas qualquer posição passa nesta verificação.

Os campos de formulário não são testados

Campos de texto e outros campos de formulário obtêm seu rótulo visível de um elemento <label>, e não do próprio texto, por isso são cobertos por verificações de rotulagem separadas, em vez desta.