Author Archives: Publishing team

Diagrams

Before using a diagram (such as a process map, flowchart or illustration), consider whether the message can be communicated better through text or a table, as users often find them difficult to understand.

All diagrams must be created by Digital Publishing. Consider whether you can reduce the complexity of the thing you are trying to convey, and contact the Content Design team at the earliest opportunity. We can help you decide if a text or table alternative may be more suitable.

If there is a user need to provide a diagram instead of a text explanation, it must:

  • have a clear starting point
  • follow normal reading direction, from left to right and top to bottom
  • avoid having overlapping lines or arrows
  • use simple shapes
  • use black and white as a default: if you do need to use colour, make sure the contrast meets WCAG AA standard (use a colour contrast checker)
  • be created by the Design team in Digital Publishing

Diagrams must also follow the same guidance for using images, including as little text as possible.

There is further guidance on how to format your information in the Data visualisation section.

Images and maps

Images can be useful to illustrate a point, but they should not be used as a replacement for a clear text description.

When publishing charts as image files, the underlying data must be available as a download for users who cannot see the image.

Format and size

Images must be no more than 600 pixels wide but can be longer than 600 pixels. Always consider usability when determining the length of an image; it needs to be fully visible on-screen without too much scrolling.

Wherever possible, provide images in SVG format so that users can magnify the content.

Text in images

Do not use text in images. If it cannot be avoided, the same text must be explained as a long description nearby on the page or in the alt text. This is so that it can be changed into other forms such as braille, speech or symbols.

Logos

Logos should not be included. If they must be included to show a collaboration with another department or organisation, there must be accompanying text naming the organisation. Logo images do not need alt text as this would repeat the text.

Use of colour

Avoid using colour alone to convey meaning in an image, as users with visual disabilities can find it hard to distinguish between them. Using red and green together is a common example as many people are unable to tell these colours apart. If you have to use colour to help explain something – check it with colour blindness software.

Interactive maps

Maps with multiple clickable areas should provide an explanation in the alt text or in the text nearby that gives an overall context to the meaning of the map.

Alt text

All charts and images must have alt text, or alternative text, to summarise the information presented for users who cannot see the visual. It can also be used to describe what should be on the page if the web browser fails to load the images. Screen readers read this out for people with visual disabilities.

Alt text should be around 125 characters (15 to 20 words), be no more than one sentence and include:

  • the chart type used (for example, bar chart, line chart)
  • the type of data used in the chart (for example, marriage rates, death rates, level of GDP, amount of weekly hours worked)
  • a summary of the main trend of the chart

Avoid using a literal description of the image or chart and instead focus on what point it is making.

Alt text can duplicate part of the descriptive chart title but should not repeat content in the main text. This causes “auditory clutter” for screen reader users where information may be repeated several times. Screen readers will read out the chart title and subtitle, so do not worry about fitting all of this information into the alt text as well.

When describing this chart, the alt text could read: Line chart showing the amount of weekly hours worked is still low but showing signs of recovery.

Example of a line chart showing the amount of weekly hours worked is still low but showing signs of recovery.