Images

Guidance on using images on NHS inform

Using images on NHS inform

There are important things to consider when using images on NHS inform.

Do

  • only use images when there’s a user need
  • make sure any information in an image can be accessed by people who can’t see it
  • consider how people using assistive technologies will access the image
  • make sure written content contains all the information the user needs to complete a task

When to use images

You can use images to:

  • help users understand instructions – like how to take a test at home
  • show a lifelike representation of something – like a skin rash
  • simplify something complex – for example, to explain the structure of the heart

When to avoid using images

You should avoid using images:

  • for decorative purposes
  • of generic stock photography
  • if the information can be given through clear and simple text instead
  • to represent abstract concepts – for example, to convey an emotion
  • with text, where possible

Types of image

There are different types of images that you could use on NHS inform. This includes:

  • photography
  • illustrations
  • images with text
  • charts, diagrams and other complex images
  • icons
Photography

You should only use photography if it’s important to show a lifelike representation of something. For example, a skin rash. When illustrating a skin condition, you should include a range of skin tones.

You should not use photography to represent abstract concepts. For example, to convey an emotion or impression to your user.

You should avoid using generic stock photography where possible.

Illustrations

Use illustrations to show a simplified image of something complex. For example, to:

  • show a physical interaction, like how to take a test at home
  • help users find something on a document, like a reference number

You should follow guidance from GOV.UK on creating illustrations.

Images with text

You should usually avoid using images with text. This is because it’s difficult for users to read, especially for users that need to read text using:

  • screen readers
  • copy and paste
  • highlight
  • resize
  • recolour

You should try to include information in written content instead of an image with text.

If you do need to use the image, include written content nearby that conveys the same meaning and context.

When you can use images with text

You can use an image with text if you can’t give this information in any other way. The essential text must be relevant to the information you need to give.

You can also use text in an image when it communicates an identity. For example, to show text with an organisation’s logo (logotype).

It’s OK to use an image that just happens to have text in it.

Charts, diagrams and other complex images

Charts diagrams and complex images are hard to make accessible. You should consider whether you can give the same information in a table or text.

You must write alt text that explains the meaning and context of the image.

You must write any more complex information in the image in a longer text description.

Make sure the long description (or a link or button that shows it) is visible to sighted users.

Some charts and diagrams can be built in an accessible way using HTML, CSS, JavaScript or SVG. Accessible charts and diagrams must make the data within the chart available as text.

Icons

In most cases, you should avoid using icons. A single icon can mean different things so it can be confusing.

If you do use icons, it’s helpful to include a visible text label alongside it.

Do not use a single icon to represent more than one thing.

Uploading images

When downloading an image to your computer, save it with an appropriate name. For example, a graphic showing the heart’s structure could be called ‘structure of the heart’.

Do not upload an image to the Content Management System (CMS) if it hasn’t got a title relevant to it’s content.

When uploading an image to the CMS, add it to the most relevant media folder. For example, an image of the ‘structure of the heart’ should be stored in the ‘heart and blood vessels’ media folder.

Once you have uploaded an image, you must fill out the:

  • alternative text
  • title

You do not need to add details for ‘caption’ and ‘description’.

Backend of WordPress showing fields to be filled out when uploading an image.

How to use alt text

Alternative text (alt text) is read out by screen readers. It’s also displayed if an image does not load or if images have been switched off. It’s also used for search engine optimisation.

Good alt text should:

  • tell people what information the image provides
  • describe the content and function of the image
  • be specific, meaningful and concise

When to use alt text

Only add alt text when you need to describe visual elements that you can’t include in written content.

You may not need to include alt text for:

  • a decorative image that doesn’t include important content
  • an icon with a text label, where the alt text would repeat the text label
  • an image used in a link, where the image is not needed to understand the link
Alt text in diagrams

If you need to use a diagram, the alt text should give:

  • an overview of the diagram, before any important details
  • a description in a linear way, moving from left to right and top to bottom
  • a description of the arrow’s function (if there are arrows in the diagram) – for example, ‘leads to’ or ‘points to’

If the diagram is too complex to describe in the alt text, you can direct people elsewhere. For example:

“Anatomy of the heart. This is a complex image. More information can be found above”.

How to write good alt text

Do

  • use normal punctuation, like commas and full stops, so the text is easy to read and understand
  • aim for no more than 2 sentences of alt text
  • describe what’s in an image to help understand it’s context
  • only add information about age, gender and race if it will help users understand the context of the image

Don’t

  • do not start with ‘Image of’, ‘Graphic of’ or common information that would repeat across every image
  • do not repeat information from the page
  • do not include extra information that’s not in the image
  • do not describe things that don’t need to be described – like borders and brand graphics
  • do not include the name of the photographer or person who created the image
Alt text examples

This is an example of an image on NHS inform’s ‘Copper coil (IUD)’ page.

Backend of WordPress showing fields to be filled out when uploading an image. The example shows an image from a contraception page.

This is an example of an image on NHS inform’s ‘Chickenpox’ page.

Backend of WordPress showing fields to be filled out when uploading an image. The example shows an image from a page on chickenpox.