Only images created by the Digital Design team will be used on the ONS website. This ensures 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
• have minimal text and annotations
• do not rely on colour alone to convey meaning

Any diagrams drafted in landscape may need to be redesigned as portrait to fit within the website’s 640-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 draft.

We currently publish all images as PNG. 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.

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.

Diagrams and accessibility

Users of all levels of expertise have accessibility needs and use screen readers and other assistive technology. Accessibility in diagrams is a challenge as assistive technology cannot read the content in 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 it in search results
• it displays better on a mobile device than an image 

Any diagram must add a level of understanding and value beyond what can be conveyed by written text. If your diagram does not have a clear user need, it is unlikely to be approved by Digital Publishing.  

Venn diagram

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

Flowchart

The following flowchart is a guide to using the publishing tracker.

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

Guide to using the publishing tracker 

• Create a publishing tracker on the Publishing Hub. 
• Use a market sensitive tracker if your release is market sensitive.
• Complete all the sections and submit your draft tracker.
• Check the preview once you are told that your release has been proofread and built.
• Submit any changes through the change log.
• Send the preview to your deputy director for sign-off.

Once your release has been signed off, it will go into the publishing queue to be published on the ONS website.

Table, chart or diagram?

Diagrams do not include data. If you are trying to visualise something that involves data, it needs to be a chart or a table. Contact publishing@ons.gov.uk if you are unsure which format is correct. 

Diagrams should not feature the structure or format of tables. Tables containing data should be built in HTML and tables containing text should be written out as plain text. View our Tables guidance for an example of how to turn a text table into plain text.