Help Text and Required Fields, Announced
Surface hints and requirements to assistive tech.
Help Text and Required Fields, Announced is a free Web Accessibility Academy lesson on CoddyKit — lesson 4 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.
Labels Are Just the Start
A field often needs more than a name. Hints and requirements must reach assistive tech, not just sighted eyes. 📝
Tie Hints With aria-describedby
Put help text in an element, then point the input's aria-describedby at its id. Now the hint reads after the label.
<input id="pw" aria-describedby="pwhelp">
<p id="pwhelp">At least 8 characters</p>Name Then Description
Screen readers speak the label first, then the described-by text. The user hears the name and the hint in a natural order.
Reference Multiple IDs
aria-describedby can list several ids separated by spaces. Combine a hint and an error message on the same field.
<input aria-describedby="hint err">Marking Required
Add the required attribute so the browser enforces it and tells assistive tech the field must be filled.
<input id="name" required>Announced Automatically
With required, a screen reader says required when focus lands. You get that for free, no extra ARIA needed.
The Asterisk Trap
A red asterisk alone is silent and easy to miss. Pair it with the required attribute or visible required text.
Explain the Asterisk
If you use an asterisk, add a legend near the form saying it marks required fields. Never leave the symbol unexplained.
aria-required as Backup
For custom controls without native validation, aria-required equals true conveys the same state to screen readers.
<div role="textbox" aria-required="true"></div>Mark Optional Instead
When most fields are required, flag the few that are optional instead. Less clutter, and the pattern stays clear.
Keep Help Visible
Show hints on screen, not just to screen readers. Everyone benefits from seeing the rules before they make a mistake.
Quick Check
How do you attach help text to a field for screen readers?
Recap
Wire hints with aria-describedby and mark must-fill fields with required. Now every user hears the name, the help, and the rules. ✅
Frequently asked questions
Is the “Help Text and Required Fields, Announced” lesson free?
Yes — the full text of “Help Text and Required Fields, Announced” 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 “Help Text and Required Fields, Announced”?
Surface hints and requirements to assistive tech. 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 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Help Text and Required Fields, Announced” 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
- Every Input Needs a Real label
- Placeholder Is Not a Label
- Grouping Fields With fieldset and legend
- Help Text and Required Fields, Announced