CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / application-data / accessible-heatmap-grid

Stable release
Back to category

Open experiment

Accessible heatmap grid

A compact two-dimensional density visualization implemented as a real table. Row and column headers establish context, while each value cell has an exact accessible label and focus tooltip.

Lab tested Responsive Dark mode
Version
1.0.0
Updated
2026-08-02
Dependencies
Zero
Live canvasInstant token updates
Source filesEditable and export-ready
<div class="cmp-heatmap">
  <table>
    <caption>
      <strong>Team activity</strong
      ><span>Last four weeks</span>
    </caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">W1</th>
        <th scope="col">W2</th>
        <th scope="col">W3</th>
        <th scope="col">W4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Mon</th>
        <td tabindex="0" data-level="1" aria-label="Monday week 1, 2 events"></td>
        <td tabindex="0" data-level="3" aria-label="Monday week 2, 9 events"></td>
        <td tabindex="0" data-level="2" aria-label="Monday week 3, 5 events"></td>
        <td tabindex="0" data-level="4" aria-label="Monday week 4, 14 events"></td>
      </tr>
      <tr>
        <th scope="row">Tue</th>
        <td tabindex="0" data-level="2" aria-label="Tuesday week 1, 6 events"></td>
        <td tabindex="0" data-level="4" aria-label="Tuesday week 2, 12 events"></td>
        <td tabindex="0" data-level="3" aria-label="Tuesday week 3, 8 events"></td>
        <td tabindex="0" data-level="1" aria-label="Tuesday week 4, 3 events"></td>
      </tr>
      <tr>
        <th scope="row">Wed</th>
        <td tabindex="0" data-level="4" aria-label="Wednesday week 1, 15 events"></td>
        <td tabindex="0" data-level="3" aria-label="Wednesday week 2, 10 events"></td>
        <td tabindex="0" data-level="1" aria-label="Wednesday week 3, 1 event"></td>
        <td tabindex="0" data-level="2" aria-label="Wednesday week 4, 7 events"></td>
      </tr>
    </tbody>
  </table>
  <p>
    <span>Quiet</span><i data-level="1"></i><i data-level="2"></i><i data-level="3"></i
    ><i data-level="4"></i><span>Busy</span>
  </p>
</div>
No runtime reactions detected Open in Editor

Validated in the lab

Experiment report

  • Schema and source files passed
  • Responsive test passed
  • Keyboard test passed
  • No console errors

Component ingredients

Dependencies
None
Browser support
Current Chrome, Current Edge, Current Firefox, Current Safari
Version
1.0.0
Last tested
2026-08-02

Accessibility notes

  • A caption and table headers establish both data axes.
  • Every focusable value cell includes a full readable label.
  • Keyboard focus presents the same tooltip as pointer hover.

License: MIT License for open-source use, modification, and distribution.

Continue testing

Related experiments