Common Naming Mistakes That Silence Controls
Avoid the patterns that leave elements unnamed.
Common Naming Mistakes That Silence Controls 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.
When Controls Go Silent
A control with no computed name is read as just button or link. These naming mistakes leave users guessing what an element does.
Icon-Only Buttons
A button holding only an icon often computes no name. Add an aria-label so the wordless control still announces its action.
<button aria-label="Delete">🗑️</button>Placeholder Is Not a Name
A placeholder is not a reliable accessible name. It vanishes on typing and many readers ignore it, so add a real label.
<input placeholder="Email">Broken labelledby IDs
An aria-labelledby pointing at a missing or misspelled id produces no name at all, silently undoing the label you intended.
<button aria-labelledby="ttl">x</button>Empty aria-label
An aria-label set to an empty string wipes out the name. The element ends up with nothing for a screen reader to announce.
<button aria-label="">Save</button>Hiding the Only Text
Putting aria-hidden on the only text inside a button removes its name source, so the control becomes anonymous to readers.
<button><span aria-hidden="true">Next</span></button>Generic Link Text
Links named Read more or Click here are technically named but useless out of context, since users hear no destination.
<a href="/post">Read more</a>Trusting title Alone
Relying on title as the only name is risky. It is the lowest priority source and several screen readers skip it entirely.
Inputs With No label
A bare input with no associated label often computes no name, leaving users unsure what to type into the field.
<input type="text">Duplicated Names
Ten buttons all named Edit force users to guess which row they affect. Give each a distinct name that includes its target.
<button aria-label="Edit profile">Edit</button>Verify With the Inspector
Open the browser accessibility panel and read the computed name for each control. If it is blank, you have a mistake to fix.
Quick Check
An icon button shows only a trash glyph. Why might it be silent?
Recap: Keep Controls Named
You learned the traps that silence controls, from icon-only buttons to broken ids, and to verify every name in the inspector. ✅
Frequently asked questions
Is the “Common Naming Mistakes That Silence Controls” lesson free?
Yes — the full text of “Common Naming Mistakes That Silence Controls” 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 “Common Naming Mistakes That Silence Controls”?
Avoid the patterns that leave elements unnamed. 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 “Common Naming Mistakes That Silence Controls” 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