Use images only if there is a real user need. Avoid unnecessary decoration.
<figure class="nhsuk-image"> <img class="nhsuk-image__img" src="https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg" alt="Picture of allergic conjunctivitis"> <figcaption class="nhsuk-image__caption"> Itchy, red, watering eyes </figcaption> </figure>
When to use images
Informative images that meet real user needs can be very important on health services - especially where they help users identify specific health problems and get the treatment they need.
We've also found users with some access needs (such as dyslexia) navigate health information (conditions and treatment) pages through images. Images help them orient themselves and they separate out the content.
But having unnecessary or decorative images can frustrate users, especially on information pages or transactional journeys.
We are working on more guidance about when to use images. We expect to publish it in 2021.
How to use images
The image component is made up of 2 elements - the image and caption - in a white box.
Images should flow with the text content, not appear too prominent or isolated.
We recommend stacking images. We've found that gallery views (images side by side) confuse users.
Follow our guidance on making images accessible. Images must have text alternatives that describe the information or function they represent. This makes sure that people with disabilities can understand them.
When using an image (or the img element), specify a text alternative with the alt attribute. Alternative text, or alt text, is read out by screen readers or displayed if an image does not load or if images have been switched off.
Do not use images that have words in them, because screen readers will not be able to read the words.
In testing we found gallery views (images side by side) confused users. Users either missed the images in the right hand column or they didn't know how to interpret the sequence. To get around this we recommend stacking images.
We also found that users clicked images in gallery views, expecting them to appear larger in a pop-up modal. When we increased the size of the images and stacked them in 1 column (not 2), we didn't see anyone clicking on them to expand them.
We tested images on the chickenpox page on nhs.uk in 2018. They tested well and all users said that the images helped them understand the symptoms.
Have you tested this component?
If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.
Before you start, you will need a GitHub account. It's an open forum where we collect feedback.