Icon Buttons That Still Have a Name
Give a wordless button a clear accessible label.
Icon Buttons That Still Have a Name 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.
The Silent Button Problem
A button with only an icon inside looks clear to the eye, but a screen reader may just say button with no clue what it does. 🔇
Every Control Needs a Name
Every interactive control must have an accessible name. For text buttons the text supplies it; an icon-only button has no text to borrow.
Add aria-label to the Button
The simplest fix: put aria-label on the button itself to name the action, even when the inside is just an icon.
<button aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>Hide the Icon Inside
Mark the inner icon with aria-hidden="true". The button carries the name; the icon is pure decoration once the label exists.
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button>Or Use Visually Hidden Text
Prefer real text? Add a span styled with a visually-hidden class. Sighted users see only the icon; screen readers hear the words.
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Add to cart</span>
</button>What sr-only CSS Looks Like
A visually-hidden class clips the text to a single pixel without using display none, which would also hide it from screen readers.
.sr-only {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
}Name the Action, Not the Icon
Label what happens, not the picture. Use Delete, not trash can. Users want the verb, not a description of the glyph.
Never Use the title Attribute Alone
The HTML title attribute is unreliable as a name: it skips touch and keyboard users entirely. Use aria-label or hidden text instead.
Toggle Buttons Need State
For an icon toggle like mute, also add aria-pressed so the button announces whether it is currently on or off.
<button aria-label="Mute" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>Keep the Name in Sync
If an icon button changes meaning, update its name too. A play button that became pause must now announce Pause, not Play.
Verify the Spoken Name
In the accessibility inspector, select the button and read its computed name. It should match the action, never be blank.
Quick Check
You have a button containing only a magnifier SVG and no text. How do you give it an accessible name?
Recap: Name Every Icon Button
Give icon-only buttons a name via aria-label or visually hidden text, hide the icon, and label the action. Now every button speaks. ✅
Frequently asked questions
Is the “Icon Buttons That Still Have a Name” lesson free?
Yes — the full text of “Icon Buttons That Still Have a Name” 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 “Icon Buttons That Still Have a Name”?
Give a wordless button a clear accessible label. 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 “Icon Buttons That Still Have a Name” 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
- Inline SVG: role img and a title
- Hiding Decorative Icons With aria-hidden
- Icon Buttons That Still Have a Name
- Icon Fonts and Their Accessibility Pitfalls