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 what they are and show for users who cannot see them. Screen readers read this information out for people with visual disabilities. Alt text can also be used to describe what should be on the page if the web browser fails to load the images.  

Alt text should include: 

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

Alt text should:  

  • be around 125 characters (15 to 20 words) – it can be longer if needed, but if it is too detailed then include some content in the main text instead  
  • be no more than one sentence 
  • include a full stop at the end 
  • include any abbreviations written out in full  

If your chart describes the trend

Your chart title should usually be a description of the data’s trend or highlight a main story. If this is the case, you can duplicate part of the descriptive chart title in the alt text. 

When describing this chart, the alt text could read: A 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.
You can read more about our chart title guidance.

If your chart title does not describe the trend 

If you do not have a descriptive chart title, you should first consider if your title could describe the data’s trend or highlight a main story. If it cannot, your alt text should still describe the trend where possible.  

Your alt text summary should not: 

  • use a literal description of the chart – instead, focus on the point it is making 
  • repeat content in the main text – this causes “auditory clutter” for screen reader users where information may be repeated 
  • repeat information from the subtitle as screen readers will read this out too  

If there is no data trend or story to highlight, you can use your chart’s title in the alt text even if it is not descriptive.