Marcando o estado inválido com aria-invalid

Uma borda vermelha informa às pessoas que enxergam que um campo falhou. Quem usa um leitor de tela não percebe cores, então precisa que a falha seja declarada no código. 🚫

O atributo aria-invalid marca um controle que falhou na validação. Defina-o como true para que a tecnologia assistiva anuncie o estado de erro.

Um campo sem aria-invalid é considerado válido. Você só adiciona aria-invalid="true" quando uma verificação realmente falha.

Assim que a pessoa usuária corrigir o valor, defina aria-invalid como false ou remova-o. Deixá-lo como true anuncia um erro que já não existe.

Aplique aria-invalid quando realmente fizer a validação, não ao carregar a página. Marcar campos vazios como inválidos antes de a pessoa usuária digitar é uma prática hostil.

aria-invalid informa que há algo errado, mas não o quê. Sempre associe-o a aria-describedby para que a pessoa usuária também ouça o motivo.

Quando o foco entra em um campo inválido, os leitores de tela dizem inválido junto com o nome. A pessoa usuária sabe imediatamente que precisa corrigi-lo.

Você pode selecionar o atributo em CSS para mostrar um contorno vermelho. Assim, seus elementos visuais e sua semântica ficam perfeitamente sincronizados.

aria-invalid também aceita valores como grammar ou spelling. Na maioria dos formulários, o simples valor true é exatamente o que você precisa.

Nunca dependa apenas de uma classe vermelha para indicar um erro. A classe é invisível para tecnologias assistivas; é aria-invalid que transmite o significado.

Marque cada controle com falha individualmente. Definir aria-invalid em um contêiner ou no formulário não informa qual campo de entrada precisa de atenção.

O que aria-invalid="true" realmente comunica?

Use aria-invalid para sinalizar campos com falha, defina-o como true quando houver erro e como false quando ele for corrigido, associando-o a uma mensagem de erro descrita. ✅