Data Visualization Alt

title: "Data Visualization Alt Text — Writing Alternatives for Charts" description: "Learn how to write effective alt text and descriptions for data visualizations that convey trends and key insights to screen reader users." weight: 10 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Effective alt text for data visualizations describes the key trend or insight, not the visual appearance, and is paired with a data table for complete information.

## What You'll Learn

How to write alt text and descriptions for different chart types.

## Why It Matters

Alt text that says "Bar chart" provides no information. Users need the key insight: what trend does the chart show? What should they learn from it?

## Real-World Use

A line chart alt text: "Line chart showing steady revenue growth from $1.2M in January to $2.1M in December 2026, with the fastest growth occurring between March and June."

## Alt Text by Chart Type

```html
<!-- Bar chart -->
<img src="bar-chart.png"
     alt="Bar chart comparing quarterly sales: Q1 $50K, Q2 $75K, Q3 $60K, Q4 $90K. Q4 had the highest sales.">

<!-- Line chart -->
<img src="line-chart.png"
     alt="Line chart of monthly active users: steady growth from 10K in January to 25K in December.">

<!-- Pie chart -->
<img src="pie-chart.png"
     alt="Pie chart of market share: Product A 45%, Product B 30%, Product C 25%.">

<!-- Scatter plot -->
<img src="scatter.png"
     alt="Scatter plot showing positive correlation between ad spend and conversions. Higher spend correlates with higher conversions.">

Data Table Partnership

<figure>
  <img src="quarterly-chart.png"
       alt="Bar chart showing quarterly revenue: Q1 $1.2M, Q2 $1.5M, Q3 $1.8M, Q4 $2.1M."
       aria-describedby="chart-data">
  <table id="chart-data" aria-label="Revenue data">
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Revenue</th>
    </tr>
    <tr>
      <td>Q1</td>
      <td>$1.2M</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$1.5M</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$1.8M</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$2.1M</td>
    </tr>
  </table>
</figure>

Common Mistakes

1. "Chart of data" as alt text

Alt text must describe the insight, not just state that a chart exists.

2. Only the chart title

"Revenue by quarter" is insufficient. Include the key values and trend.

3. No trend description

The alt text should state the trend: "Revenue grew consistently throughout the year."

4. Alt text different from chart

Alt text must match the data in the chart. Inconsistent alt text is worse than no alt text.

5. No data table for complex charts

Simple alt text plus a data table provides complete information.

Practice Questions

1. What should the alt text of a chart describe? The key insight, trend, or conclusion the chart conveys, not its visual appearance.

2. Should a pie chart alt text list all slices? Yes, if there are 3-5 slices. For more slices, summarize the main categories.

3. What is the best pairing for chart alt text? Short alt text summarizing the insight plus a data table with exact values.

Challenge: Write alt text for 5 different chart types (bar, line, pie, scatter, area). Include the key insight in each.

FAQ

Mini Project

Take 5 chart images and write effective alt text for each. Pair each with a data table. Verify that the alt text conveys the key insight without seeing the chart.

What's Next

Learn how to perform SVG Testing to verify SVG accessibility.