A11yCraft

Appearance

Charts ​

These techniques will allow the assistive technology to read a chart description. The descriptions should include any values shown in the chart.

Accessibility Checklist ​

  • Is your chart described within the text?
  • Does the alt attribute say where the description can be found?
    • If No, have you used the area-describedby and id attributes to link the chart to the paragraph?

Long Text Description ​

The best way to ensure that the chart is accessible to everyone is to provide a text description of the chart. The description's location should be mentioned in the chart alternative text, but the long description should be visible to everyone.

Example

html
<img src="bar-chart.jpg" 
     alt="A bar chart shows the popularity of five products. 
     Details are in the next paragraph." 
/>
<p>
    Product 5 was the most popular with 78%, followed by Product 3 with 72%.
    Product 4 and Product 1 were just over half with 56% and 52% respectively.
    Finally, Product 2 came in last with 39%.
</p>

ARIA Described By ​

If it is not possible to display the long description close to the chart then you can dedicate an element on the page to describing the chart. This can be linked to the chart using the aria technique called aria-describedby and allows screen reader technology to identify the description of the chart. The element describing the chart does not have to be immediately before or after the chart and can be anywhere on the page.

Example

html
<p id="chart">
    Product 5 was the most popular with 78%, followed by Product 3 with 72%.
    Product 4 and Product 1 were just over half with 56% and 52% respectively.
    Finally, Product 2 came in last with 39%.
</p>
<p>Some other text can be here that separates the description from the chart.</p>
<img src="bar-chart.jpg" 
     aria-describedby="chart" 
     alt="A bar chart shows the popularity of five products." />

Associated WCAG Criteria ​

1.1.1 Non-Text Content (Level A)

All non-text content visible on the website has a text alternative that serves the same purpose. See the WCAG 2.2 Guidelines for Non-Text Content for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Non-Text Content