Images – Content design: planning, writing and managing content – Orientation
Simplify the data as much as possible so that you can create simple charts using Markdown. When you create a chart using Markdown, users can switch between viewing the data as a chart or as a table.
There are a few sample charts and tables that you can publish using Markdown on GOV.UK.
If you cannot reproduce your data using a chart in Markdown, you might need to download a chart as an image. It is best to use SVG (Scalable Vector Graphics) format so that users can enlarge the content.
SVGs are “scalable” to maintain the same quality regardless of the resolution or screen size on which they are displayed. This means that users can enlarge the images by zooming in and out. The quality of bitmap file types like JPG and PNG decreases when they are enlarged. If you only have a bitmap file, you need to recreate it as SVG.
To create an SVG, the tool you use to create graphics and diagrams must have a “save as SVG” or “export as SVG” option. Changing a bitmap file type to SVG doesn’t make it scalable – it has to be done from the source file.
There are several free tools you can use to create SVGs. Here are some examples :
Your organization may already be using a paid tool that can create SVGs. Here are some examples :
- Adobe illustrator
- Affinity designer
- PowerPoint (newer versions only)
If you have an older version of PowerPoint, you should be able to export a slide to EMF format and then convert it to SVG using an online file converter tool. However, this is probably not a suitable solution if you are working with pre-release data.
When posting charts that show complex information, provide a textual explanation of what the chart shows. For example, you can describe trends in body text and have a table showing the most important data points. You can also link to the raw data as an attachment or provide a way for users to request it.
When describing the graphic in body text, avoid describing the structure of the graphic or chart. For example, avoid saying things like: “The image is a bar graph showing EU funds as a percentage on the vertical axis and EU countries on the horizontal axis”. Instead, you need to describe the data. Avoid being too vague or too wide. For example, instead of saying that there is data on percentages relative to EU countries, explain what is happening in the data and key trends.
If you need to add text to the image for axis and data labels, use a sans serif font. You should avoid adding any other text in the image, such as titles or source information – this text should appear in the body of the page.
You should avoid pie charts because they are the least accessible data visualizations when maximized. They also need additional considerations regarding the use of color and color contrast.
Don’t rely solely on color to convey information. Make sure the color contrast ratio is high enough between segments, lines, text, and background color. You can use the glitch color contrast checker or the WebAIM color contrast checker.
There are other tips on creating graphs accessible from the government statistics department.