Two ways to handle alternative text for charts & graphs

As a general rule, content editors should avoid including text in images. However, there are some cases in which text is a necessary part of the image. One common example of this is charts and graphs.

Charts and graphs, which I am going to collectively refer to as charts from here on, include various forms of data represented in a visual format. As you would expect, we need to make this information available in a text alternative so screen reader users can access the information.

Now this gets tricky because charts are a great way to convey relational data to sighted users, but the equivalent text description can be quite long. There is no character limit on image alt text, but it’s considered a best practice to limit the description to 1-2 sentences. Most charts will require a text description longer than this to provide a useful description. Remember, our goal with alternative text is to adequately describe the purpose of the image to the user.

So what alternatives exist for writing longer text descriptions?

The aria-describedby attribute

This attribute points to the ID of the element that describes the image. The aria-describedby value must reference an element on the same page, but the element does not need to be visible.

<img src="browser-usage-chart.jpg" alt="Pie chart showing primary browser." aria-describedby="browser-chart-description">
<p id="browser-chart-description">Chrome is the most commonly used browser at 52.3% of respondents outpacing Microsoft Edge at 19.3%. Firefox is used by 16% of respondents, Safari is used by 8% of respondents, and Internet Explorer is only used by .9% of respondants. 3.6% of respondants use a browser that was not listed as an option in the survey.</p>

Data tables

The vast majority of data represented in a chart can be translated to a table layout – it just won’t look as pretty. Tables with proper HTML markup are well supported by screen readers and provide the best alternative method for navigating complex data.

<img src="browser-usage-chart.jpg" alt="Pie chart showing primary browser. Described under the heading Browser usage survey results.">
[…]
<h3>Browser usage survey results</h3>
<table id="browser-usage-table">
  <caption>When using your primary screen reader, which browser do you use most often?</caption>
  <tbody>
    <tr>
      <th scope="col">Response</th>
      <th scope="col"># of respondents</th>
      <th scope="col">% of respondents</th>
    </tr>
    <tr>
      <th scope="row">Chrome</th>
      <td>795</td>
      <td>52.3%</td>
    </tr>
    […]
  </tbody>
</table>

In both of these cases, an alt attribute should still be included on the image to give a short description of the chart.