Inclusive content - Skin symptoms

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:

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.

Example

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.

Example

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".

Example

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.

Example of a long description for an image of chickenpox

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

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.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: July 2022