Success Criterion 1.1.1
Conformance level A
W3C reference F13

Chart Alt Text That Never Explains What Each Color Means

1.1.1 — Non-text Content

Scenario

Setting

A car-rental site's checkout flow

What’s wrong

The alt text describes the image but leaves out information that is shown only through colors in the image (e.g., which line on the chart is which).

Example

Picture a car-rental site's checkout flow: the alt text describes the image but leaves out information that is shown only through colors in the image (e.g., which line on the chart is which).

Why it matters

Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning. Here, on a car-rental site's checkout flow, the result is they miss information that's only conveyed visually.

How to test

Read the alt text aloud: if the image uses color to distinguish items (e.g., a chart legend), check whether the alt states which color means what — if not, it fails.

How to fix

Include the color-conveyed information (which item is which) in the text alternative itself.

Outcome

After the fix, the same visitor to a car-rental site's checkout flow can now get the same information as everyone else.

Who is affected

Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning.

Learn more

Understanding Understanding document (opens in a new tab)
Technique Related technique (opens in a new tab)