Diagrams

Diagrams are graphics that can help explain information or enhance understanding including:

  • process maps
  • flow charts
  • timelines
  • decision trees

Diagrams can be a useful illustrative tool but can present issues with accessibility and text duplication. 

All diagrams must be created by the Digital Publishing Design team. 

Diagrams do not include data. If you are trying to visualise something that involves data, please contact the Data Visualisation team. 

Diagrams and accessibility

Users of all levels of expertise have accessibility needs and use screen readers and other assistive technology. Assistive technology cannot read images. Those using these tools will require the information to be provided as alt text.

We have a legal obligation to make our content accessible. More information is available in our accessibility statement.

Using text instead of a diagram

We recommend using text structured under headings and subheadings instead of a diagram because it means that:

  • the content is accessible to more users
  • the content can easily be updated
  • users can zoom and alter the size of text
  • search engines can read the text and display in search results
  • it displays better on a mobile device than an image

Any diagram must add a level of explanation and value beyond what can be conveyed by written text.

Venn diagram with too much text

This diagram could simply be rewritten as plain text which would be clearer and more accessible.

The following conventions are against house style as they are obstacles to accessibility:

  • symbols such as “&” and “/”
  • directional text
  • images and charts without alt text
  • superscript after dates such as “st” and “th”
  • blank cells in tables
  • carousels of images
  • walls of text
  • text tables

The use of a diagram should only be considered in certain more complex cases. For example, when you need to visualise a complicated process with multiple elements that relate to each other.

Contact content.design@ons.gov.uk at the earliest opportunity to discuss if a diagram is appropriate for your content.

Identifying user needs

When you are considering using a diagram, ask yourself what the user need is and whether that can be met solely with clearly written text.

Questions to ask yourself

  • What is the message you would be trying to communicate with a diagram?
  • Would a diagram help the user to understand the subject or would it raise as many questions as it answers?
  • Can the message be communicated as text or a table instead of a diagram? 
  • Are you trying to communicate too much information in one diagram?
  • Will you be updating the content regularly?

Users who access the website via screen readers and other assistive technology often cannot read text shown in an image, so they require the information to be provided as alt text as well as a longer description in the text. By trying to explain the message as succinctly as possible in the text before considering an image, it avoids duplicating content and ensures the website is accessible for everyone.

Consider whether the content will require significant time and resource to update regularly. It is easier to change text than it is a diagram.

If you are unsure whether a diagram would meet your users’ needs, contact content.design@ons.gov.uk for guidance.

Design principles for diagrams

Only PNGs created by the Design team in Digital Publishing will be used on the ONS website. This ensures that all diagrams:

  • are clear and easy to understand
  • follow normal reading direction, from left to right and top to bottom
  • use simple shapes and as few different shapes as possible
  • have a clear starting point
  • do not have overlapping lines
  • do not rely on colour alone to convey meaning

Any diagrams that are landscape in prototype form may need to be redesigned as portrait to fit within the website’s 600-pixel width. Any text displayed on the website will be in a 16-point font size, so use as few words as possible in your diagram.

Our goal is to move towards the more accessible SVG format in the future.

All diagrams should also have accompanying alt text for accessibility.

Before
The following diagram is an example of a draft submitted for publication on the ONS website by an output author.

An example of a draft submitted for publication on the ONS website by an output author.

After
The following diagram is a new version created by our designers and in line with our design principles. This version includes a clearer font and a simpler design that is easy to understand.

A new version of a diagram created by our designers and in line with our design principles

Process for publishing diagrams

Once you have identified there is user need to use a diagram, email content.design@ons.gov.uk with:

  • the name and date of your release and, if known, the number of the sharepoint tracker
  • the title and the main message of the diagram
  • any links or attachments to prototypes or rough sketches you have in an editable format so that text can be manipulated

We are constantly improving based on research and best practice. Any significant changes to our guidance are available on the Updates page.