aria-describedby pour fournir un contexte supplémentaire
Ajoutez des indications et une aide lues après le nom.
aria-describedby pour fournir un contexte supplémentaire est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Beyond the Name
Sometimes a control needs more than a name. aria-describedby attaches extra context that a screen reader reads after the name.
It References IDs
Like labelledby, aria-describedby holds the id of another element. The browser pulls that element text in as the description.
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>Name First, Then Description
A screen reader speaks the name first, then a short pause, then the description. The order helps users grasp the control quickly.
Perfect for Hints
Field hints like format rules belong in aria-describedby, so the guidance reads automatically when the field receives focus.
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>It Does Not Replace the Name
A description is supplementary. If an element has only aria-describedby and no name, it is still effectively unlabeled.
Combine Multiple IDs
Give aria-describedby several space-separated ids, and the browser joins their text, which is handy for a hint plus an error.
<input aria-describedby="hint err">Errors Are Descriptions Too
Point aria-describedby at a validation message so the error reads aloud with the field, not stranded somewhere else on the page.
<input aria-describedby="err">
<p id="err">Email is required</p>Keep Descriptions Brief
A description should be a short sentence. Long aria-describedby text gets read in full every time, which quickly turns tiresome.
It Stays Visible
Unlike a hidden label, the referenced hint usually stays visible on screen, helping sighted users at the same time as it helps others.
Support Can Vary
Most screen readers honor aria-describedby, but some announce it only in certain modes, so test the hint with a real reader.
describedby vs labelledby
Use aria-labelledby for what a control is called and aria-describedby for extra detail about it. They serve different jobs.
Quick Check
You want a password rule read after the field name. Which attribute fits?
Recap: Adding Context
You learned that aria-describedby references ids to read hints and errors after the name, supplementing it without ever replacing it. 💬
Questions Fréquemment Posées
La leçon « aria-describedby pour fournir un contexte supplémentaire » est-elle gratuite ?
Oui — le texte complet de « aria-describedby pour fournir un contexte supplémentaire » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « aria-describedby pour fournir un contexte supplémentaire » ?
Ajoutez des indications et une aide lues après le nom. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « aria-describedby pour fournir un contexte supplémentaire » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le calcul du nom accessible, expliqué simplement
- aria-label ou aria-labelledby
- aria-describedby pour fournir un contexte supplémentaire
- Erreurs courantes de nommage qui rendent les contrôles muets