What Good Looks Like
This layout uses meaningful alt text to describe informative images, ensuring that screen reader users get the exact same context and emotional impact as sighted users.
"Accessibility isn't extra work. Accessibility is already here, waiting for you to notice."
What happens when a picture is worth a thousand words, but your screen reader can't say any of them?
According to the 2026 WebAIM Million report, missing alternative text is the second most common accessibility failure, found on 53.1% of home pages.
When an image tag lacks an alt attribute entirely, screen readers are forced to guess. Sometimes they simply announce "graphic" or "image," leaving the user to wonder if they just missed a crucial chart, a promotional banner, or a "Buy Now" button. Even worse, some screen readers will default to reading the raw file path—forcing a user to listen to "graphic, images slash assets slash hero underscore 1920x1080 underscore final underscore v2 dot j p g."
Read the full Alternative Text data in the WebAIM Million Report.
To truly understand the impact of WCAG Success Criterion 1.1.1 (Non-text Content), we'll look at two visually identical news articles. However, when we strip away the visual layer and experience them through a screen reader simulator, their differences will become glaringly obvious.
This layout uses meaningful alt text to describe informative images, ensuring that screen reader users get the exact same context and emotional impact as sighted users.
This layout omits the alt attribute entirely or uses terrible, auto-generated file names. Prepare to be frustrated as crucial context is hidden behind "Image 404."
Not all images need a description. In fact, over-describing images can create auditory clutter for screen reader users. The key to mastering alternative text is understanding the difference between an informative image and a decorative one.
These images convey meaning that isn't present in the surrounding text. This includes charts, graphs, infographics, and photographs that tell a story. They must have a descriptive alt attribute (e.g., alt="A golden retriever catching a frisbee in mid-air").
These images are purely for visual flair. They might be abstract background shapes, thematic stock photos, or icons that sit directly next to text explaining the same thing. They must have an empty alt attribute (alt=""), which tells the screen reader to safely ignore them.