• Success Criterion 1.4.1
  • Conformance level A

Heatmap With No Value Labels or Data Table Alternative

1.4.1 — Use of Color

Scenario

Setting

A crowdfunding platform's campaign page

What’s wrong

Heatmaps without value labels or accessible data alternative.

Example 

<div class="heatmap">
  <div class="cell" style="background:#7f1d1d"></div>
  <div class="cell" style="background:#fca5a5"></div>
</div>
<!-- darker red = more pledges that day, no numbers, no table -->

Why it matters

A campaign creator studying the heatmap can't tell if the darkest day brought in 40 pledges or 400.

How to test

View a heatmap in grayscale: if the values become unreadable and there's no numeric label or accessible data table, it fails.

How to fix

Provide the underlying numbers in an accessible table alongside or instead of the color-only heatmap.

<table>
  <caption>Daily pledges</caption>
  <tr><th>Sept 1</th><td>412 pledges</td></tr>
  <tr><th>Sept 2</th><td>98 pledges</td></tr>
</table>

Outcome

The campaign creator finds the exact date their biggest pledge spike happened and repeats what worked.

Who is affected

Colorblind users and screen reader users, since the heatmap has no data table or value labels to fall back on.

Learn more

Related scenarios