Associando erros a campos com aria-describedby
Faça a mensagem ser lida junto com o campo de entrada.
Associando erros a campos com aria-describedby é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Um erro solto
Uma mensagem de erro próxima a um campo parece estar relacionada a ele. Mas, para um leitor de tela, é apenas um texto solto que talvez nunca seja ouvido. ⚠️
A solução é um vínculo
Você precisa associar formalmente a mensagem ao campo de entrada. O atributo que faz isso é aria-describedby, e ele fica no campo.
Aponte para um id
Dê ao elemento de erro um id e depois defina o aria-describedby do campo de entrada com esse mesmo id. Agora os dois estão oficialmente vinculados.
<input id="email" aria-describedby="email-err">
<p id="email-err">Enter a valid email.</p>O que a pessoa ouve
Quando o foco chega ao campo de entrada, o leitor de tela lê o rótulo, o tipo e depois a descrição. O erro não fica mais sem associação.
Nome e depois descrição
aria-describedby não substitui o rótulo. O rótulo fornece o nome; describedby acrescenta informações extras, que são lidas depois dele.
Várias descrições
Você pode listar vários ids, separados por espaços. O navegador os lê na ordem, permitindo unir uma dica e um erro.
<input aria-describedby="hint err">Somente quando se aplicar
Adicione o id do erro a aria-describedby somente enquanto o erro estiver sendo exibido. Apontar para um nó vazio ou oculto pode fazer com que seja lido nada ou pode confundir as pessoas.
Mantenha o texto real
O elemento descrito deve conter texto real e visível. aria-describedby lê o seu conteúdo, portanto um span vazio não descreve nada útil.
Destinos ocultos permanecem silenciosos
Se o destino tiver display none, a maioria dos leitores de tela o ignora. Mantenha o texto do erro renderizado e visível para que a descrição seja realmente anunciada.
Funciona com aria-invalid
Associe describedby a aria-invalid no mesmo campo. Um informa que houve falha; o outro explica o motivo. Juntos, contam toda a história.
Não serve apenas para erros
O mesmo atributo também transmite dicas de formato, como regras de senha. Erros são um uso comum, mas não o único.
<input aria-describedby="pw-rule">
<p id="pw-rule">At least 8 characters.</p>Verificação rápida
Como fazer um leitor de tela ler um erro junto com seu campo?
Recapitulação
Associe os erros aos campos usando aria-describedby apontando para um id real e visível. O leitor de tela então lê o campo e seu erro juntos. ✅
Perguntas Frequentes
A aula “Associando erros a campos com aria-describedby” é grátis?
Sim — o texto completo de “Associando erros a campos com aria-describedby” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Associando erros a campos com aria-describedby”?
Faça a mensagem ser lida junto com o campo de entrada. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Associando erros a campos com aria-describedby”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Associando erros a campos com aria-describedby
- Marcando o estado inválido com aria-invalid
- Movendo o foco para o primeiro erro
- Em linha, ao perder o foco ou ao enviar: o momento importa