Complex Images

title: "Complex Images — Long Descriptions for Charts and Infographics" description: "Learn how to provide extended descriptions for complex images like charts, infographics, and diagrams using aria-describedby and longdesc." weight: 5 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Complex images like charts and infographics need extended descriptions beyond standard alt text, using aria-describedby, long descriptions, or accessible data tables.

## What You'll Learn

How to provide long descriptions for complex images using multiple techniques.

## Why It Matters

Alt text of 125 characters cannot convey all the data in a chart or infographic. Extended descriptions ensure users get the full information.

## Real-World Use

A blog post includes an infographic about internet usage trends. Below the image, a detailed text description explains each data point, and the image uses aria-describedby to link to the description.

## Long Description with aria-describedby

```html
<img src="internet-trends.png"
     alt="Bar chart showing global internet users from 2019 to 2026"
     aria-describedby="chart-description">

<div id="chart-description">
  <p>This bar chart shows the growth of global internet users:</p>
  <ul>
    <li>2019: 4.1 billion users</li>
    <li>2020: 4.5 billion users</li>
    <li>2021: 4.9 billion users</li>
    <li>2022: 5.2 billion users</li>
    <li>2023: 5.4 billion users</li>
    <li>2024: 5.7 billion users</li>
    <li>2025: 5.9 billion users</li>
    <li>2026: 6.1 billion users (projected)</li>
  </ul>
</div>

Data Table Alternative

<img src="revenue-chart.png"
     alt="Line chart showing quarterly revenue for 2026"
     aria-describedby="revenue-data">

<table id="revenue-data" aria-label="Revenue data from chart">
  <caption>Quarterly revenue 2026</caption>
  <tr>
    <th scope="col">Quarter</th>
    <th scope="col">Revenue</th>
  </tr>
  <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>
</table>

Common Mistakes

1. Long description hidden from sighted users

The description should be visible to all users, not just screen readers.

2. Missing aria-describedby association

Without aria-describedby, screen readers do not automatically associate the description with the image.

3. Alt text and description are identical

Alt text should summarize the image. The description should provide full detail.

4. Using the deprecated longdesc attribute

longdesc is deprecated in HTML5. Use aria-describedby instead.

5. Description not next to the image

Place descriptions adjacent to the image so all users can access them.

Practice Questions

1. What attribute links a complex image to its long description? aria-describedby on the image, referencing the id of the description element.

2. What is the best format for a complex chart description? A data table with the exact values shown in the chart, placed near the image.

3. How long should the alt text vs the description be? Alt text: 125 characters summarizing the image. Description: as long as needed for full detail.

Challenge: Create a complex infographic with a detailed text description. Use aria-describedby and ensure the description is visible.

FAQ

Mini Project

Find a chart or infographic online. Write a short alt text and a detailed long description (or data table). Add both to a test page with proper ARIA associations.

What's Next

Learn about Figure and Figcaption for semantically grouping images with their captions.