Images on GOV.WALES

Only use images if they:

• are necessary to explain something which cannot be explained using text, for example a map
• help users understand information in a different way, for example a graph

Text is usually preferred as it:

• is more accessible, for example easier to read using screen magnifiers
• resizes better across devices
• tends to be more visible to search

Avoid images which contain text. Write it in the body text instead.

Images may require alt text as an alternative for people who use assistive technology, like screen reading software.

Decorative images do not add information to the content of a page, for example:

• the information provided by the image is available as text
• the image is only present to make the page more visually attractive

Only add images for visual attraction to promotional content, for example press releases and campaigns.

The alt attribute must be empty quote marks (alt=””). To meet this requirement in GOV.WALES core content editors must leave the alt text field blank.

Informative images convey a simple concept or information that can be expressed in a short phrase or sentence.

Limit use of informative images, where possible use text instead. For example, instead of an image of a tick it may be possible to use the text ‘yes’.

The alt text should convey the meaning of content that is displayed visually. This may not be a literal description of the image.

Complex images include charts, diagrams and infographics.

Image of charts, diagrams or infographics should use the SVG format. SVGs allow users to magnify images without losing quality.

Describe a complex image in body text

It is better to describe the contents of complex images in body text.

The alt attribute must be empty quote marks (alt=””). To meet this requirement in GOV.WALES core content editors must leave the alt text field blank.

The description must explain the contents of the image. In the case of a chart summarise the main point, this might include an important trend or extreme value. It may help to imagine you are describing the image to someone over the phone.

Describe a complex image in alt text

Only use alt text for complex images when it is not possible to describe the contents in body text.

Alt text should be no longer than around 125 characters. This makes it unlikely alt text can adequately describe complex images and is one reason body text is preferred.

Do not start alt text with ‘image of’ or similar, a screen reader will tell the user an image is present and they do not need to be told twice.

Alt text for charts should include:

• the chart type used (for example, bar chart, line chart)
• the type of data used in the chart (for example, marriage rates, death rates, level of GDP, amount of weekly hours worked)
• a summary of the main point, this might include an important trend or extreme value

For example, when describing the following chart the alt text should be:

Line chart showing the number of treatments was fairly stable around 9,500 per year then decreased greatly to around 1,500 in 2020 to 2021.

Image