Make written content and imagery of skin symptoms inclusive for people with various skin tones and people with sight loss.
Why make skin symptoms content inclusive
In the past, the NHS website mostly described skin symptoms as they appear on white skin. The NHS website team is now updating content to reflect a variety of skin tones.
While some skin symptoms (such as itchiness) are the same for everyone, other symptoms may differ depending on people's skin tones.
When a person's skin tone is not represented in our content, they do not have the same opportunity to recognise symptoms and understand what they need to do next.
It's also important to make sure people with sight loss get as much information as possible.
This page explains:
- how to make written content about skin symptoms more inclusive
- how to make images of skin symptoms more inclusive
It also includes:
How to make written content about skin symptoms more inclusive
Prioritise symptoms that affect everyone equally
When you list symptoms, start with the ones that affect everyone equally. Depending on the condition these might be:
- shape and size (of a rash, spot, or affected area)
- if or how it spreads on the body
- texture (for example, smooth, blisters, rough or scabs)
- location on the body
- how it feels (for example, itchy, hot or painful)
- other symptoms (such as a high temperature)
- skin colour changes
Explain when a symptom may look different on various skin tones
A key symptom that's likely to differ on various skin tones is a change in skin colour.
For example, a rash that looks red when it appears on white skin may not look red on skin that's brown or black.
If a change in skin colour does not affect everyone equally, make this clear.
On white skin the rash can appear red, but on brown and black skin the rash may be harder to see.
If possible, be specific about how a symptom may appear differently on a range of skin tones. This can be difficult because of a lack of medical sources on which to base this information. See the medical sources for symptoms on black and brown skin (on this page).
Describe skin tone as white, brown and black in main content
In main content, use "brown and black skin" and "white skin", not "dark skin", "darker skin" or "light skin".
Include descriptions of how skin feels, if possible
Non-visual symptoms are especially useful for people with sight loss.
The scarlet fever rash feels like sandpaper and starts on the chest and tummy.
How to make images of skin symptoms more inclusive
Include images of symptoms on a variety of skin tones, if possible
Research done on the NHS website showed that people find multiple images of the same symptom on different skin tones useful.
The NHS website team is still testing the best way to display multiple images that's accessible for both sighted people and people with sight loss.
Describe skin tone in alt-text
Alt-text is a short text description of an image for people who cannot see the image (ideally under 125 characters including spaces).
Use the terms "light brown", "medium brown" and "dark brown" or "white" to describe skin tone in alt-text, rather than just saying "brown", "black" or "white".
Yellowing of the white part of the eye and the skin under the person's eyebrows. Shown on dark brown skin.
(Alt-text example from NHS website jaundice page)
Read more about how to use alternative text for images in content in our accessibility guidance.
Provide a long description too
If you can, also add a long description for images of skin symptoms because short alt-text cannot convey all the information in the image.
With complex images, like images of skin symptoms, long descriptions help people who face barriers due to sight loss. They can give these users the same level of detail that sighted users can see in the image.
The NHS website team is experimenting with using the details component to reveal a long description under an image. That means everyone, not just screen reader users, can access the information if it they want to. Please feed back if you are exploring other ways to present long descriptions.
This is a close-up image of chickenpox spots on white skin. You cannot tell what part of the body is shown.
There are about 10 spots that vary in size from about 1mm to 1cm. Some spots are close together.
Some of the bigger spots are raised and have scabs over them. The scabs are yellow and pink and the skin around the scab is pink. Some scabs look soft and seem to be filled with fluid.
The smaller spots look like tiny pink blisters.
This example includes:
- the size of the spots
- the colour of the spots
- the shape of the spots
- the texture of the spots
- the number of spots
- the pattern of the rash
Also include the location on the body if it's easy to identify in the image. If the image does not clearly identify the location on the body, explain that you cannot tell what part of the body is shown.
It's difficult to capture all these characteristics in the alt-text character limit.
Medical sources for symptoms on black and brown skin
- Mind the Gap: UK clinical handbook of signs and symptoms in black and brown skin published in 2020
- Skin Deep: international website with images of skin conditions in children shown on a range of skin tones
- Skin of Color Society: patient dermatology education for patients: US website with information on a range of skin conditions
- British Association of Dermatologists: reviewing how we describe skin symptoms
- DermNet NZ: a free resource on skin conditions, supported by dermatologists on behalf of the New Zealand Dermatological Society
Details of NHS website user research
The NHS website team surveyed 500 people, 100 of whom were people of colour. They also carried out a card sorting exercise with around 50 people, most of whom did not identify as having white skin. They did 14 in-depth 1‑to‑1 interviews with people with brown or black skin and conducted research with 12 people with sight loss.
In their research, they found that people with brown or black skin:
- appreciated content that clearly stated that a symptom may appear differently on various skin tones
- preferred the terms "light brown", "medium brown" and "dark brown" to less specific terms such as "light skin", "dark skin" or "darker skin"
The NHS website team also found it helps people with sight loss if you:
- include descriptions of how skin feels when you touch it, so that people know what to feel for on their own skin or someone else's skin
- are specific about the skin tone shown in an image, for example, "light brown" or "medium brown"
- provide a long description for complex images when short alt-text cannot convey all the information users need
Long descriptions tested well with screen reader users but the team is still testing them in content about skin symptoms.
Would you like to contribute to this guidance?
Please let us know how this has worked for you and, in particular, if you have research findings to share. 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.