Perceivable · Level A · 1.1.1
Non-text Content
Every piece of non-text content — a photo, an icon, a chart, an audio clip — needs a text alternative that serves the same purpose, so it can be read aloud, shown as braille, or otherwise presented in a form everyone can use. Purely decorative content needs the opposite: marked so assistive technology skips it entirely.
- Blind
- Low vision
- Cognitive
- Deaf / hard of hearing
How to recognize it
Turn off images in the browser, or turn on a screen reader, and see what's left. Four failure patterns show up over and over. First, no alt attribute at all — worse than an empty one, because most screen readers fall back to announcing the filename ('team dash photo dot jay peg'). Second, alt text that's technically present but useless: 'image', 'photo123', 'icon' — present, but conveys nothing. Third, alt text that describes what an image looks like instead of what it's for or what information it carries: a bar chart with alt="chart" tells you nothing about the trend it shows; a decorative divider line with a full descriptive alt just adds noise a screen reader user has to sit through for no reason. Fourth, an icon-only button where the fix went on the wrong element: someone added a careful, descriptive alt to the icon image itself, but the button that wraps it still has no accessible name — check the icon's alt (it should usually be empty, since the icon is decorative) and separately check whether the button announces anything at all.
How to fix it
Purely decorative images (spacers, background flourishes, redundant icons next to text that already says the same thing) get alt="" so assistive technology skips them entirely — not omitted, deliberately empty. Meaningful images get alt text that describes their purpose in context, not their visual appearance: not 'photo of five people smiling' but 'the support team in front of the office'. Complex images like charts and infographics need more than alt text can hold — there's no hard spec limit on alt length, but keep it short anyway (a sentence, not a paragraph) since long alt text is unreliable across screen readers. Put the full data next to it as real text or a table, and connect the two with aria-describedby, pointing at that element's id, so a screen reader user gets the short takeaway from alt and can reach the full detail on request. For icon-only buttons and controls specifically, this overlaps with how you name any control — see 4.1.2.
Example
Avoid
<img src="team-photo.jpg"><img src="q3-sales-chart.png" alt="chart"><img src="separator.png" alt="decorative horizontal line graphic">Prefer
<img src="team-photo.jpg" alt="The five-person support team outside the office entrance"><img src="q3-sales-chart.png" alt="Q3 sales: up 18% over Q2" aria-describedby="q3-chart-desc">
<p id="q3-chart-desc">Full breakdown: EU +32%, North America +9%, APAC +4%, driven by the new EU market launch.</p><img src="separator.png" alt="">