aria-describedby for Extra Context
Attach hints and help that read after the name.
aria-describedby for Extra Context is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. 💬
Frequently asked questions
Is the “aria-describedby for Extra Context” lesson free?
Yes — the full text of “aria-describedby for Extra Context” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “aria-describedby for Extra Context”?
Attach hints and help that read after the name. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “aria-describedby for Extra Context” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Accessible Name Computation, Demystified
- aria-label vs aria-labelledby
- aria-describedby for Extra Context
- Common Naming Mistakes That Silence Controls