Accessible Charts

title: "Accessible Charts — Providing Data Tables for Charts" description: "Learn how to make data charts accessible by providing data tables that contain the same information as the chart visualization." weight: 5 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Charts must be accompanied by data tables or textual descriptions that contain the same data, ensuring screen reader users can access the information.

## What You'll Learn

How to pair charts with data tables and describe chart trends in text.

## Why It Matters

A chart may show a trend visually, but screen reader users cannot see the trend. The data table provides the raw numbers, and the text description explains the insight.

## Real-World Use

A bar chart shows quarterly revenue. Below the chart, a data table lists each quarter with its revenue. A text description explains: "Revenue grew steadily from Q1 ($1.2M) to Q4 ($2.1M), with the strongest growth in Q2."

## Chart with Data Table

```html
<figure>
  <svg role="img" aria-labelledby="chart-title chart-desc"
       viewBox="0 0 400 250">
    <title id="chart-title">Quarterly Revenue 2026</title>
    <desc id="chart-desc">Bar chart showing revenue by quarter</desc>
    <!-- Chart bars and labels -->
    <rect x="40" y="180" width="60" height="40" fill="#0066cc"/>
    <rect x="120" y="120" width="60" height="100" fill="#0066cc"/>
    <rect x="200" y="80" width="60" height="140" fill="#0066cc"/>
    <rect x="280" y="40" width="60" height="180" fill="#0066cc"/>
  </svg>

  <figcaption>Figure 1: Quarterly revenue for 2026</figcaption>
</figure>

<table aria-label="Revenue data for quarterly chart">
  <caption>Quarterly revenue 2026 (in millions)</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>$1.2M</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td>$1.5M</td>
    </tr>
    <tr>
      <th scope="row">Q3</th>
      <td>$1.8M</td>
    </tr>
    <tr>
      <th scope="row">Q4</th>
      <td>$2.1M</td>
    </tr>
  </tbody>
</table>

<p><strong>Trend description:</strong> Revenue showed consistent growth throughout 2026, increasing from $1.2 million in Q1 to $2.1 million in Q4, representing a 75% annual increase.</p>

Common Mistakes

1. No data table for chart

Charts must have an accompanying data table or detailed text description.

2. Data table differs from chart

The data table must contain the exact same data as the chart, not summarized or modified.

3. No trend description

The raw numbers are not enough. Describe the trend or insight the chart conveys.

4. Chart title is vague

"Quarterly Revenue" is better than "Figure 1." Use descriptive titles.

5. Color is the only differentiator

If the chart uses color to distinguish data series, add patterns or labels as well.

Practice Questions

1. What should accompany every data chart? A data table or detailed text description containing the same information.

2. What should the text description of a chart include? The trend, key data points, and insights that the chart visually conveys.

3. How do you associate the chart with its data table? Use aria-describedby on the SVG referencing the table or description id.

Challenge: Create a bar chart SVG with a companion data table and a text description of the trend.

FAQ

Mini Project

Create a line chart SVG showing monthly temperature data. Add a data table with monthly values and a trend description. Use aria-describedby to associate them.

What's Next

Learn about Chart Patterns and how to design accessible chart elements.