Graphs, Charts and Diagrams
Describe the diagram
Include a full description in the ALT for the image. This can become quite long so consider also providing some of the information in the general content of the page.
<img src="graph.png" alt="This bar graph depicts the preferred snack type of 34 respondents.
The number of respondents is plotted on the x-axis.
Categories of snack are plotted on the y-axis. Chocolate has the highest preference with 12
responses, Fruit 9 responses, Chips 7 responses and Cake with 6 responses." />
Use labels, lines and white space to help distinguish different data sets - do not rely on colour alone. The pie chart below has labels on each of the categories. The wedges are outlined in black while one is exploded out from the rest of the chart. Use some or all of these approaches.
The example chart could be further improved through the use of background shading on the wedges and sample squares of the legend.
In the following Line Graph dots and dashes are used to distinguish between the different data sets. Labels are also provided at data points reducing the need to constantly refer to the axis to ascertain values.
Provide Data in Alternate Format
Data can be provided in tabular format under the relevant graph.
<img src="piechart.png" alt="Favourite Snack Foods - Data in tabular format below" /> <table> <caption>Preferred snack food chart data</caption> <thead> <tr><th scope="col">Cake</th><th scope="col">Chocolate</th> <th scope="col">Fruit</th><th scope="col">Chips</th></tr> </thead> <tbody> <tr><td>15%</td><td>45%</td><td>30%</td><td>10%</td></tr> </tbody> </table>
Alternatively provide a written description as text content on the same page as the graph.
Results from 150 respondents indicating their favourite snack:
- 45% prefer chocolate
- 30% prefer fruit
- 10% prefer chips
- 15% prefer cake
<img src="piechart.png" alt="Favourite snack foods - described below" /> <p>Results from 150 respondents indicating their favourite snack:</p> <ul> <li>45% prefer chocolate</li> <li>30% prefer fruit</li> <li>10% prefer chips</li> <li>15% prefer cake</li> </ul>
Dense and Complex Data
In cases where the data is very complex and may require an extended description provide users with a method of contact such as an email or phone number to request assistance.
If you are having difficulties accessing this content please contact firstname.lastname@example.org for an extended description.
<img src="complexgraph.png" alt="Really Complex Graph" />
<p>If you are having difficulties accessing this content please contact <a href="mailto:email@example.com">firstname.lastname@example.org</a> for an extended description. </p>
Alternatively provide a link to a page that provides an extended description of the graph.
<img src="complexgraph.png" alt="Preferred snack foods - described via link below" /> <p><a href="#">Extended description of graph </a>
Read the Guideline
Key things to remember
- Describe the content
- Distinguish data
- Don't rely on colour
- Provide data in alternate format
- Include descriptions in page content
- Provide a contact for further assistance