Buttons That Announce What They Do
Label actions clearly for users who cannot see them.
Buttons That Announce What They Do 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.
Buttons Need Names
A button is only useful if users know what it does. Its accessible name is what a screen reader reads aloud before they press it.
Text Becomes the Name
For a normal button, the visible text inside it is the accessible name. Clear words mean a clear announcement.
<button>Save changes</button>Say the Action
Label a button with the action it performs, like Save, Delete, or Add to cart. A verb tells users exactly what happens.
Avoid Vague Labels
Labels like OK, Submit, or Go are vague when several buttons share them. Name the specific action so each one stands alone.
The Icon-Only Problem
An icon button with no text has no accessible name. A screen reader may just say button, leaving the user guessing. 🤔
<button><svg>...</svg></button>Name an Icon Button
Give a wordless button a name with aria-label. Now the icon still shows, but assistive tech announces what it does.
<button aria-label="Close dialog"><svg>...</svg></button>Hide Decorative Icons
When a label already names the action, mark the inner icon aria-hidden so it is not read as extra noise.
<svg aria-hidden="true">...</svg>Announce State Changes
A toggle button should report its state. Use aria-pressed so screen readers say whether it is on or off.
<button aria-pressed="true">Mute</button>Expanding Content
A button that shows or hides a panel should carry aria-expanded so users hear whether it is open or collapsed.
<button aria-expanded="false">Details</button>Keep Labels Short and Honest
A good label is short but truthful. It promises exactly what pressing the button does, with no surprises after the click.
Match Visible to Accessible
If a button has visible text, keep those words inside its accessible name so voice-control users can speak the label they see.
Quick Check
An icon-only close button shows just an X. How do you give it an accessible name?
Recap
Name every button by its action, label icon-only ones, and expose state with aria attributes. Now users always know what they do. 👍
Frequently asked questions
Is the “Buttons That Announce What They Do” lesson free?
Yes — the full text of “Buttons That Announce What They Do” 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 “Buttons That Announce What They Do”?
Label actions clearly for users who cannot see them. 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 “Buttons That Announce What They Do” 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
- Links Go Places, Buttons Do Things
- Link Text That Makes Sense Out of Context
- Buttons That Announce What They Do
- The href-less Anchor Anti-Pattern