Charles Sturt University
Charles Sturt University

Complex Images

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.

 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.

<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." />

Distinguish Data

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.

Sample Pie Chart

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.

Sample Line Graph

Provide Data in Alternate Format

Data can be provided in tabular format under the relevant graph.

Favourite Snack Foods - Data in tabular format below

Preferred snack food chart data
CakeChocolate
FruitChips
15%
45%
30%
10%

<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.

Favourite snack foods - described below

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.

Sample Complex Graph

If you are having difficulties accessing this content please contact contentowner@email.com 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:contentowner@email.com">contentowner@email.com</a> for and extended description. </p>

Alternatively provide a link to a page that provides an extended description of the graph.

Preferred snack foods - described via link below

Extended description of graph

<img src="complexgraph.png" alt="Preferred snack foods - described via link below" />

<p><a href="#">Extended description of graph </a>