Exercise 5: Create accessible content

Use the checklist for creating accessible content.

Part 1: Text alternatives

What text alternative should you provide for the highlighted images in the examples below?

Example 1

Example landing page with thumbnail images

Example 1 - our suggested alt text

All the images are decorative. A blank text alternative is appropriate for each.

Example 2

Example 2 - our suggested alt text

The image needs a short text alternative to label the image, and long text version to provide the equivalent information in text.

The short text alternative could be “Organisation chart, text version linked below”, assuming there’s a text link below the image that leads to a long text version.

The long text version needs to list all the roles and relationships shown in the image. If the text version is on a separate page, a link back to the original page is useful.

Part 2: Colour and contrast

What colour or contrast issues need to be checked or resolved to make these images accessible?

Example 1

Example 1 - our suggested changes

The legend relies on colour alone to identify the data segments in the chart. To resolve this, a pattern could be used with the colours. Alternatively, the text labels identifying the segments could be placed adjacent to each segment.

A further problem is that none of the colours offer sufficient contrast against the white background or each other, making the size of some segments hard to distinguish. A solution would be to place the identifying labels adjacent to each segment.

Example 2

Example 2 - our suggested changes

The background colour does not offer sufficient contrast with the brown text (except when used for large text). The contrast ration is 3.6:1. Suggest making the text colour darker to achieve a contrast ratio of at least 4.5:1.

Part 3: Review for accessibility

What would it take to make these images accessible?

Example 1

Example infographic that uses text, colour and graphics

Example 1 - our suggested changes

This image is primarily text. The image should be converted to styled text with a heading (Differences between apprenticeships and traineeships) and perhaps a table to achieve the same layout. The icons can still be used, with blank text alternatives since they are decorative.

Two of the text colours (the lighter blue and the orange) do not offer enough contrast against the white background. Darker shades could be used.

Example 2

Example infographic with extensive floating text and incidental map of Australia

Example 2 - our suggested changes

This image is primarily text and in its current format would be difficult for many people to read. The image should be converted to styled text, perhaps tagged as a list though it would not necessarily need to look like a list. The image of Australia is decorative and would not require a text alternative.

Some of the text is a shade of grey that does not offer sufficient contrast against the white background. A darker shade could be used.