Hiding Decorative Icons With aria-hidden
Keep ornament out of the accessibility tree.
Hiding Decorative Icons With aria-hidden is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 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.
Some Icons Say Nothing
A little flourish next to a label adds nothing for a screen reader user. Announcing it just adds noise they have to wade through. 🔇
The Word Decorative
An icon is decorative when removing it would not change what the user understands. The nearby text already carries the meaning.
Hide It From the Tree
Set aria-hidden="true" on a decorative icon to pull it out of the accessibility tree so screen readers skip it entirely.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>It Hides Children Too
One aria-hidden="true" on a wrapper hides the element and everything inside it, so you mark the container, not each path.
Empty alt Does the Same for img
If the decorative icon is an <img>, give it an empty alt instead. An empty alt tells screen readers to skip the image.
<img src="sparkle.png" alt="" />Never Hide Visible Content
The golden rule: do not put aria-hidden on anything a sighted user relies on. You would erase real content for some people.
Never Hide Focusable Things
Putting aria-hidden on a focusable element creates a ghost: keyboard users land on a control screen readers refuse to announce.
Pair It With focusable false
For decorative inline SVGs, add focusable="false" alongside aria-hidden so no browser sneaks it into the tab order.
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>Redundant Icons Are Decorative
A trash icon beside the word Delete is redundant. Hide the icon and let the visible text do the talking for everyone.
Watch for the Lone Icon
Careful: an icon with no nearby text is usually not decorative. Hiding it would leave the control silent and unnamed.
Confirm It Is Gone
In the accessibility inspector, a properly hidden icon simply vanishes from the tree. That empty spot is exactly what you want.
Quick Check
A checkmark icon sits right next to the visible word Complete. What should you do with the icon?
Recap: Hide the Noise
Decorative icons get aria-hidden="true" (or empty alt) and focusable false, never on focusable or unique content. Less noise, clearer pages. 🎯
Frequently asked questions
Is the “Hiding Decorative Icons With aria-hidden” lesson free?
Yes — the full text of “Hiding Decorative Icons With aria-hidden” 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 “Hiding Decorative Icons With aria-hidden”?
Keep ornament out of the accessibility tree. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Hiding Decorative Icons With aria-hidden” 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