Day 23 - Make Data and Charts Understandable

Data is powerful — but only if everyone can access it.

Tables, charts, and graphs must convey meaning visually and programmatically. If your data is locked inside an image or inaccessible canvas element, it’s invisible to users relying on screen readers or alternative formats.

Assistive technologies rely on semantic structure, not visuals. That means proper table markup, alternatives for charts, and no “chart screenshots” without explanations.

Good Practice

Use semantic HTML for tables: <table>, <caption>, <th>, and scope attributes
Avoid charts that rely on color alone to convey meaning
Provide text alternatives (summaries, tables, or screen-reader-only data) for canvas-based or image-based visualizations
Make SVG charts accessible using <title>, <desc>, or ARIA roles where needed

✅ Example: Accessible Table

<table>
  <caption>
    Accessibility issues by category
  </caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Color contrast</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Missing labels</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

Example: Text Summary for a Chart

If you’re using a charting library or canvas/SVG: “This chart shows that color contrast issues are the most common accessibility barrier (12 out of 20 total issues), followed by missing labels (8).”

Watch Out For

Using screenshots of charts with no text alternative
Charts that use only color to distinguish categories or trends
Tables built with divs and styled to look like tables, but with no semantic structure
Charts with interactive hover-only tooltips that are not keyboard/screen-reader accessible

Pro Tip

When using JavaScript chart libraries (e.g., Chart.js, D3, Highcharts):

Add a table fallback or text fallback (hidden visually, but screen reader-accessible) Use aria-hidden=“true” on the chart canvas, and expose the fallback table
Provide text summaries for quick understanding WCAG 1.4.5 also warns against images of text — including static charts with no meaningful alternative.

Do this today: Review your tables and charts. Ask yourself: If I couldn’t see this visualization, could I still understand the data? Add a proper table structure or a short summary so screen reader users (and search engines!) don’t miss out.

If you would like to learn more about this: