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

<img src="chart.png">

Why it matters

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

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.

<img src="chart.png" alt="Q3 revenue chart showing 12% growth">

The alt attribute gives assistive technology the same information the image conveys visually.

Outcome

On a car-rental site's checkout flow, this barrier is gone for blind and low-vision people using screen readers — they get the same result as anyone else here.

Who is affected