aria-describedby para contexto adicional
Associe dicas e ajuda que serão lidas depois do nome.
aria-describedby para contexto adicional é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 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.
Além do nome
Às vezes, um controle precisa de mais do que um nome. aria-describedby associa um contexto extra que um leitor de tela lê depois do nome.
Faz referência a IDs
Assim como labelledby, aria-describedby contém o id de outro elemento. O navegador incorpora o texto desse elemento como descrição.
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>Nome primeiro, depois descrição
Um leitor de tela fala primeiro o nome, faz uma breve pausa e depois lê a descrição. Essa ordem ajuda os usuários a entender rapidamente o controle.
Perfeito para instruções
Instruções de campos, como regras de formato, devem ficar em aria-describedby, para que a orientação seja lida automaticamente quando o campo receber focus.
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>Não substitui o nome
Uma descrição é complementar. Se um elemento tiver apenas aria-describedby e nenhum nome, ele continuará, na prática, sem rótulo.
Combine vários IDs
Informe vários IDs separados por espaços em aria-describedby, e o navegador unirá os textos. Isso é útil para combinar uma instrução com um erro.
<input aria-describedby="hint err">Erros também são descrições
Aponte aria-describedby para uma mensagem de validação, para que o erro seja lido junto com o campo, em vez de ficar isolado em outro lugar da página.
<input aria-describedby="err">
<p id="err">Email is required</p>Mantenha as descrições breves
Uma descrição deve ser uma frase curta. Um texto longo em aria-describedby é lido por inteiro todas as vezes, o que rapidamente se torna cansativo.
Continua visível
Ao contrário de um rótulo oculto, a instrução referenciada geralmente continua visível na tela, ajudando os usuários que enxergam ao mesmo tempo que ajuda os demais.
O suporte pode variar
A maioria dos leitores de tela respeita aria-describedby, mas alguns só o anunciam em determinados modos. Por isso, teste a instrução com um leitor real.
describedby vs labelledby
Use aria-labelledby para indicar como um controle é chamado e aria-describedby para fornecer detalhes adicionais sobre ele. Eles têm funções diferentes.
Verificação rápida
Você quer que uma regra de senha seja lida depois do nome do campo. Qual atributo é adequado?
Recapitulação: adicionando contexto
Você aprendeu que aria-describedby faz referência a IDs para ler instruções e erros depois do nome, complementando-o sem jamais substituí-lo. 💬
Perguntas Frequentes
A aula “aria-describedby para contexto adicional” é grátis?
Sim — o texto completo de “aria-describedby para contexto adicional” é 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 “aria-describedby para contexto adicional”?
Associe dicas e ajuda que serão lidas depois do nome. 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 3 de 4.
Quanto tempo leva a aula “aria-describedby para contexto adicional”?
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
- O cálculo do nome acessível, desmistificado
- aria-label versus aria-labelledby
- aria-describedby para contexto adicional
- Erros comuns de nomeação que silenciam controles