ARIA
Campos de entrada em ARIA precisam de nome
- Regra:
aria-input-field-name - Gravidade: Grave
- Nível WCAG A
Por que isso importa
Um combobox, listbox ou campo de busca montado com elementos genéricos não tem rótulo próprio. Sem nome, é anunciado só pelo papel: a finalidade fica invisível para quem não olha a tela.
Como corrigir
- Aponte aria-labelledby para o elemento de rótulo visível.
- Sem rótulo visível, use aria-label com a mesma redação do texto de exemplo.
- Um texto de exemplo sozinho não é nome: ele some assim que a pessoa digita.
Na marcação
<div role="combobox" aria-expanded="false"></div><div role="combobox" aria-expanded="false" aria-label="Country"></div>A exigência por trás disso
Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:
- 4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A
Para aprofundar
Deque University sobre aria-input-field-name (abre em nova aba)
A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.
Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.