2

We're working on an online report that uses a lot of graph charts, all of them as images (eg not interactive). I know best practices for alt tags, but was wondering if adding the data of the graph would be better for accessibility. Data on the graphs is quite limited, no more than 3x6 columns and rows and mostly pie charts.

Hence the question is: is there a benefit or disadvantage in adding the full data to the alt tags?

Examples:

without data: alt="A pie chart graph displaying values for something"

with data: alt="A pie chart displaying values for something. Labels and values: A,10; B,15; C,8; D,16"

(just in case, labels are not letters, but very descriptive labels)

Of course, we could use the data tables, but they would be redundant for most users, and being so small, they really look bad, hence why I'm thinking of this option

1 Answer 1

2

Firstly, it's probably sensible to challenge your plan to use images for charts; alt text can provide a suitable substitute for text for users with some assistive technology, but aren't nearly as helpful for users with colour vision issues, cognitive issues, foreign language speakers, etc. Defining any graph with actual DOM nodes (or actual text inside SVGs) allows things like copy/paste, customised typefaces, and page zoom, which are equally valuable accessibility technologies for some users.

In this way, charts embedded as images are only marginally less problematic than tables embedded as images.

You should consider whether the content you're putting into the alt text would be better served as a <figcaption> element. There's a good write-up of the difference between alt text and <figcaption> at thoughtbot (emphasis theirs):

While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.

If (e.g. for technical reasons) the charts cannot be reasonably converted over to structured data, the alt text is only one way you can go about conveying the data in the chart. The advice WCAG provides for data charts is as follows:

A bar chart compares how many widgets were sold in June, July, and August. The short label says, "Figure one - Sales in June, July and August." The longer description identifies the type of chart, provides a high-level summary of the data, trends and implications comparable to those available from the chart. Where possible and practical, the actual data is provided in a table.

This is referred to as Situation B, where "a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram)".

As described on that page, your job is to pull the key information (that is, the implications the chart describes) out of the chart and into text (either alt text or, ideally, in the supporting text on the page around the graphic), but then ideally to pull the actual data out of the chart and into a table to be interpreted explicitly for people who need to access the values themselves. For any long text alternative for a graphic, WCAG requires that the link to the long text is appropriately connected to the graphic (either defined "nearby" and/or with the applicable aria attribute, or with a link from a caption, etc.).

This approach helps not only users of screen readers but all your readers.

3
  • 1
    Thank you Kit for your great answer. I'm already using figcaption for images, but since figcaption shouldn't repeat the alt text, I thought of this option. The problem is that adding the data sources looks ridiculous because the data sources are about 150x300px, while the content area is 1120px wide, making the images look really small. Therefore, the figcaption explains the chart, and figures are visible, but my issue is how to make this data accessible without adding extremely small charts. So far, my only option is to hide the table with CSS and display it only for screen readers.
    – Devin
    Commented Sep 2 at 2:37
  • 1
    I think I'll try and see what happens with w3.org/WAI/WCAG21/Techniques/general/G73 since it seems to be my exact use case
    – Devin
    Commented Sep 2 at 2:45
  • There's no reason not to add the data table as the figcaption content. Commented Sep 3 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.