Empty alt and the Hidden Decorative Image
Use alt equals nothing so screen readers skip it.
Empty alt and the Hidden Decorative Image 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 Empty alt Trick
For decorative images, the right move is an empty alt: write alt equals two quotation marks with nothing inside.
<img src="flourish.png" alt="">What Empty alt Does
An empty alt marks the image as decorative, so screen readers skip it completely and never announce it.
Empty Is Not Missing
Empty alt and a missing alt are totally different. Empty means skip me on purpose; missing means the author forgot.
What Missing alt Causes
With no alt at all, many screen readers fall back to reading the file name aloud, like IMG underscore 4823 dot jpg.
Always Include the Attribute
The rule is simple: every img needs an alt attribute. The only question is whether it is empty or filled.
Spacers and Dividers
Visual spacers, lines, and dividers carry no meaning, so they are textbook cases for an empty alt.
<img src="line.png" alt="">Avoid Whitespace Inside
Do not put a space between the quotes. A real empty alt has nothing inside, not even a single blank character.
Better Yet, Use CSS
If an image is truly decorative, often the cleanest fix is a CSS background image, which the accessibility tree ignores entirely.
Hiding With aria-hidden
You can also hide a decorative graphic with aria-hidden set to true, common for inline SVG icons beside visible text.
<svg aria-hidden="true"><use href="#star"></use></svg>Do Not Hide Real Content
Be careful: never put an empty alt or aria-hidden on an informative image, or you silently delete it for some users.
When Decoration Is a Link
If a decorative image sits inside a link, the link still needs accessible text somewhere, or it becomes unnamed.
Quick Check
Spot the difference that matters.
Recap
Well done! Empty alt intentionally hides decoration, missing alt is a bug, and aria-hidden or CSS backgrounds also keep ornament quiet.
Frequently asked questions
Is the “Empty alt and the Hidden Decorative Image” lesson free?
Yes — the full text of “Empty alt and the Hidden Decorative Image” 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 “Empty alt and the Hidden Decorative Image”?
Use alt equals nothing so screen readers skip it. 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 “Empty alt and the Hidden Decorative Image” 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
- Informative vs Decorative: The First Decision
- Writing Alt That Conveys Purpose, Not Pixels
- Empty alt and the Hidden Decorative Image
- Complex Images: Charts, Maps, and Long Descriptions