Walnut desk lamp
(212 reviews)
$49.00
Perceivable · 1.1 Text Alternatives
Non-text Content WCAG 1.1.1 · Level A
Images, icons and other non-text content need a text alternative serving the same purpose. Controls need a name stating their purpose; media, tests and sensory content need at least a descriptive label; CAPTCHAs need a label plus a version in another sense; decoration must be hidden from assistive technology.
- Level
- A
- Since
- WCAG 2.0
- Principle
- Perceivable
- Guideline
- 1.1 Text Alternatives
Live demo
Hear how a screen reader reads the images
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Read what the screen reader says in each version. Listen for the lamp photo, the star rating, the search button and the dashed line.
Live example
Passes
Fails
Walnut desk lamp
(212 reviews)
$49.00
The tools follow the version you last used.
What happened
Why it passes
Each image says what it shows: the lamp, a rating of 4 out of 5 and a Search button. The decorative line is skipped, so nothing gets in the way.
Why it fails
A blind shopper hears a file name instead of a lamp, gets no rating, meets a button with no name, and hears about a line that means nothing.
Examples
Code that fails, and the fix
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
01What changes 2 lines
Fails
Product photo with a file name as alt
Live preview
<h3>Walnut desk lamp</h3><img src="/img/IMG_0042.jpg" alt="IMG_0042.jpg">A screen reader reads out the file name, which tells a blind shopper nothing about the lamp. This is failure F30: a text alternative that is not an alternative.
Passes
Descriptive alt, and empty alt for decoration
Live preview
<h3>Walnut desk lamp</h3><img src="/img/lamp-walnut.jpg" alt="Desk lamp with a walnut base and a brass shade"><img src="/img/flourish.svg" alt="">The photo's alt says what a sighted shopper sees. The flourish is decoration, so alt="" tells screen readers to skip it; alt="flourish" would only add noise (failure F39).
02What changes
+ aria-label="Search" + aria-hidden="true"
Fails
Icon-only search button with no name
Live preview
<button type="submit"> <svg viewBox="0 0 24 24" width="20" height="20"> <circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"/> <path d="M15 15l5 5" stroke="currentColor" stroke-width="2"/> </svg></button>The button holds only a drawing, so it has no accessible name. A screen reader says just "button", and the user cannot tell that it searches.
Passes
Icon button named with aria-label
Live preview
<button type="submit" aria-label="Search"> <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"> <circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="2"/> <path d="M15 15l5 5" stroke="currentColor" stroke-width="2"/> </svg></button>aria-label gives the button the name "Search", and aria-hidden keeps the drawing itself out of the accessibility tree.
Passes
Chart alt that states the data
Live preview
<figure> <img src="/img/sales-q3.png" alt="Bar chart. Online sales rose each month: $2.1m in July, $2.8m in August and $3.4m in September."> <figcaption>Online sales, third quarter</figcaption></figure>The alt gives the figures and the trend, not only the title. An alt of "Sales chart" would name the image but hide what it shows.
Why it matters
Who it helps
Blind and low-vision people get the information through a screen reader or braille display, and text alternatives can also be enlarged or read aloud for people who have trouble interpreting images.
W3C: Understanding 1.1.1Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
Checking it
A few concrete steps. Automated tools find some failures; most need a person.
- Check every image, icon, SVG and image button for alt text or an accessible name that conveys the same information or function.
- Confirm decorative images have empty alt text or are otherwise hidden from assistive technology.
- Use a screen reader or turn images off and confirm nothing meaningful is lost, including on icon-only buttons.
Common failures
Where it breaks
- Images have no alt text, or alt text that only repeats the file name, such as IMG_0042.jpg.
- An icon-only button, such as a magnifying glass for search, has no accessible name.
- A chart's alt text gives only its title, not the data or conclusion it shows.