Author Archives: Publishing team

Diagrams

Before using a diagram consider whether the message can be communicated better through text or a table, as users often find process maps and flowcharts difficult to understand. Consider whether you can reduce the complexity of the thing you are trying to convey, and work with a content designer to make sure the text is clear.

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.

All diagrams must be created by Digital Publishing. There is further guidance on how to format your information in the Data visualisation section.

Images, maps and infographics

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

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.

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

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

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.

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
  • the type of data used in the chart
  • 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.

When describing this chart, the alt text could read: Line chart of marriage rates where the amount of opposite-sex marriages peaked in 1972 and has generally fallen since.

Line chart of marriage rates where the amount of opposite-sex marriages peaked in 1972 and has generally fallen since.