Long descriptions (e.g. for images showing skin symptoms)

[teodorastraianu1]

What

Using long descriptions for pictures showing skin symptoms. This is something we have tested with screen reader users and received very positive feedback on. We would like to discuss more widely whether this is something we should apply to some of the images on our website.

Long image descriptions are generally used to provide screen reader users with more information about an image in cases where alt text does not offer enough characters to say everything there is to say. In these cases, the images are considered complex images, rather than informative. We believe this applies to some/all the images on nhs.uk, as they provide information that is often crucial in helping people identify a condition.

Why

Mission Team 1 (at nhs.uk) has tested the use of long descriptions with visually impaired users as part of redesigning the Chickenpox page.

We wrote and tested long descriptions for three images showing chickenpox.

An example:

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

As shown, we described the rash through things like:

• 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 location on the body
• the pattern of the rash

It would have been very difficult (if not impossible) to try to capture all of these characteristics in the alt text character limit.

Feedback

The feedback we got from users on these descriptions was overwhelmingly positive. Participants said the images were useful and helped them understand what chickenpox might look or feel like.

People particularly liked the non-visual descriptions (“soft”, “raised”) and overall thought the information was concise but offers all the necessary details.

Anything else

More information on long descriptions: https://www.w3.org/WAI/tutorials/images/complex/ This is a related ticket on alt text: #308

[sarawilcox]

Related issue: Images

[sarawilcox]

We presented these findings to the March Style Council meeting but there is more work going on to test these, so this isn't ready for a decision yet.

[thelittlelostgirl79]

Update on Long/detailed image descriptions in Inclusive descriptions of skin symptoms (IDSS) feature, (Mission Team 1 at nhs.uk)

From late March to early April 2021 we:

• conducted further rounds of user research to better understand accessibility needs of users, with particular focus on the image

We asked users: • Can they access the long descriptions to each image within the gallery component? • How clear is the ‘detailed image description’ link text? What do people expect to see? • What do people think about the long descriptions?

General findings

• The elements we tested were well understood by sighted participants and advanced screen reader users.
• 3/4 screen reader users understood what the gallery component was showing and how to access the detailed description. The caption in the stage 3 gallery did not hinder their ability to access the detailed descriptions or understand the image gallery. However, 1 advanced screen reader user was initially confused by what was meant by ‘tabpanel’.
• The gallery feature was not accessible or intuitive for novice screen reader users

Feedback we received during this round of testing • 1 participant suggested that if detailed descriptions are provided on nhs.uk, it should be promoted across organisations supporting people with visual impairments • 3/4 blind participants said detailed descriptions helped them feel more confident about what to look/feel for and how chickenpox may look on the skin. • 1 participant, with a neurological disorder, liked the detailed descriptions because it helped her process the information within the images. • 1 sighted participant said the detailed descriptions helped her understand how chickenpox appears differently on different people. • Detailed description not essential - 1 blind participant didn’t understand the purpose of the detailed description, likely because he didn’t understand the image gallery. • Detailed image descriptions wasn't understood by 1 participant with dyslexia - didn’t understand the purpose, or that they pertained to the images within the image gallery and were an extension of the information given within the page copy. They also found the detailed descriptions were overwhelming, too long and the font size too small. She thought it would be better if the descriptions were: in larger font / split into bullet points / on a separate page. • liked location and style of the detailed description - 1 participant with a neurological disorder liked that the detailed description was placed in a container and not spread across the whole screen as she thought that made it easier to look at. • Link text misunderstood - 1 participant thought that clicking on the link would show her more general information about chickenpox (including treatment). But once she clicked on it she understood that it was a description of the image only. Another participant thought it would show her a bigger version of the image. Once she clicked on the link she understood the link text better and understood why it was called ‘detailed image 1 description’. Also, as noted in previous testing, 1 participant thought the detailed description related to all the images in the gallery. • Belief that the link would take them away from the page - 1 participant with a neurological disorder was wary of clicking on the detailed image description because they thought it might take them to a different page and be unable to navigate back. • Link text goes unnoticed - 1 participant didn’t initially notice the link and only noticed it after being asked to go through the content again.

Recommendations we've actioned so far: • we've changed the screen reader instructions to interact with the image gallery • considering changing the font size of the detailed image descriptions

Our research so far has revealed further testing is required. This will include: • Testing whether links are easier to use than tabs - UR indicated this may be so. • Testing whether detailed description links should be available directly after each thumbnail to make them easier to access, rather than needing to select the tab and navigate to the link • Awareness that VoiceOver on Mac didn’t announce buttons and links as such and as a result a user was confused about whether she could interact with them or not (for example, the ‘detailed image description’ detail) - it may have been an issue with VoiceOver and Safari.

[henocookie]

Related to the issue: Make content about skin symptoms more inclusive #181

[sarawilcox]

I'll update this ticket as I iterate the skin symptoms page. MT1 has got some more info about long descriptions.

[sarawilcox]

Content about long descriptions included in latest iteration of skin symptoms content: https://service-manual.nhs.uk/content/inclusive-content/skin-symptoms#provide-a-long-description. Published.

[sarawilcox]

Some desk research about long descriptions

In particular what to include and how to structure long descriptions. Note: several sources have said not to overthink it. Any description is better than none.

W3C guidance

W3C guidance on complex images - information about charts and complex photos, e.g. : picture of a peacock.

"Complex images can be difficult to understand by many people – especially those with low vision, learning disabilities, and limited subject-matter experience. Make long descriptions available to everyone to reach a wider audience with your content. For example, show the description as part of the main content. It may also be possible to reduce unnecessary complexity in your images and make them easier to understand for everyone."

Long descriptions are one continuous para.

Example: "The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings." [Note: there's nothing about the beige background colour, but then there's nothing to the background in this image.]

ITU-T (International Telecommunication Union)

Guidance on text alternatives for images, 2020, PDF There's a lot in this document. Worth a deeper dive. Here are some key points relevant to our discussions.

• Identify type of image: "Identifying the type of an image provides a quick impression regarding the purpose and possible contents of the image. People looking at an image use this information to give them a "first impression" of what to look for when looking at the image." e.g. photograph

• Identify purpose of the image: "Along with information on the type of image, information on the purpose of the image is important in letting a person know whether or not to read the entire text alternative." e.g. informative purposes. "The text alternative should (implicitly or explicitly) identify the specific purpose of the image. ... help the reader to quickly decide whether or not to read the rest of the text alternative. Where statements of purpose are included in a text alternative, they should be briefly stated in the first sentence of the text alternative." E.g. "This is a photo of Albert Einstein." "Avoid redundancy with captions" - don't repeat.

• Identify image components: "The complexity and structure of an image will determine the complexity and structure of appropriate text alternatives. ... "Where the background or border of an image is important, they can be considered as additional image components. Whether or not a component is identified and elaborated upon depends on how important information about the component is with respect to the purpose and context of the image."

• Structuring info about images and their components: Start with info about the content of the whole image, then info about image components. "It is important for an image first to be considered as a whole entity before then considering components of the image. ... Because an image can have a vast amount of information, some images can be further analysed by identifying several parts (called image components) and then identifying information about each part (or image component). Breaking down the image into several parts allows for focus on the details of those particular parts, resulting in more information about the image"

• Different types of content: subjective (e.g. emotional or motivational meaning, opinion, symbolism), objective (e.g. factual, physical properties), relationships (e.g. between images or between image components (e.g child throwing ball): actions or logical, temporal or spatial relationships), interaction (how user is expected to interact with image, intended use).

• Evaluating the importance of the image: "The context in which the image is used helps to determine the importance of pieces of information about the image."

  • "Essential information needs to be presented either in the main body of text (when referring to the image) or in the primary alternative text." Essential info = "most people want/need it most of the time. ... Without it, the use has no idea why the image is there or what the image is for. ... Based on this info, the use will determine if they need/want to know more about it. ... It provides the essence, purpose, function, or intent of the image."

• "Significant information satisfies the detailed interests of most users most of the time. Significant information needs to be presented either in the primary alternative text or in secondary alternative text. ... It is information that could be obtained from viewing the image by more than a quick glance."

• "Helpful information provides more detailed information about the image for those users who wish to further explore or understand the image, beyond its intended role within the document." Includes specific details for some of the target audience. "It is not appropriate to be placed in the primary alternative text. Helpful information may be placed in secondary alternative text or in a separate document that is linked from either the main body of text or the primary alternative text."

• Organising the info: Eliminate duplication. "Importance is used for selecting the information to present, but not necessarily the order of presentation. While it is important to identify the type and purpose of an image before elaborating on the image, the order of presenting the rest of the information within a text alternative will depend on its context of use, the flow of the document, the style of the document and needs of conciseness and readability."

• "Not important info."

AccessiblePublishing.Ca

Guide to image descriptions/Accessible Publishing.Ca

Key points: Decorative images do not need to be described Write descriptions with a clear structure Write descriptions based on context Write for your audience Aim for conciseness Use present tense / action verbs Write out abbreviations and use MathML Be objective Do not censor Text within images need to be written out Don’t rely on captions

"Work from the general to the specific: provide an overview of the image before you describe specific details. A strategy we use is to break the image up into its component parts, and then organize them so that the description makes logical sense. ... If the image is a photograph of a person, you want to start by describing things that immediately jump out at you such as special photography effects or anything that is prominently portrayed in the image. Next describe the setting, expressions, and if applicable, any actions taking place. Finally, describe what they are wearing."

[sarawilcox]

More desk research

UX Collective/Alex Chen

How to write an image description - includes findings based on an online survey of blind / low vision / visually impaired people.

Object-action-context: "The object is the main focus. The action describes what’s happening, usually what the object is doing. The context describes the surrounding environment."

Objective, concise, and descriptive: "descriptive enough that it describes all the essential aspects of the image"

Example: Description: Black Lives Matter sign being held in a crowd.

Object: Black Lives Matter sign Action: being held Context: in a crowd

We can add more detail to this description to paint a more vivid picture. In most cases, I recommend adding the detail with the object-action-context format. This makes the description more concise.

A concise way to add detail: A painted Black Lives Matter cardboard sign being held anonymously in a blurred out crowd in front of a stone building.

A redundant way to add detail: Black Lives Matter sign being held in a crowd. Behind them, there is a building made of stone. The crowd is blurred out. The sign is painted on cardboard. The person holding the sign is anonymous.

Includes other examples, e.g. of adding meaning and variation according to context/user group.

Re race and gender: "In general, I recommend describing race and gender if (1) it’s relevant to the image, (2) if you know what their identity is, and (3) if the way you’re describing it is consistent with other descriptions."

"In my opinion, it’s better to have something than nothing. Better write a description, even if it’s super brief, so that the image is accessible rather than nothing at all."

Nieman Lab/NASA

“Space is for everyone”: Meet the scientists trying to put otherworldly images into words Tips include:

• Work with people who use these descriptions.
• Know what the purpose of the image is (content, intended audience) and the purpose of the alt text.
• Start with the big picture. Orient the audience first. Then go into the details of each component of the image
• Think about ways to standardize descriptions for types of visuals.

[sarawilcox]

Poet Introduction to Accessible Images: a training tool. Developed by The DIAGRAM Center (Digital Image And Graphic Resources for Accessible Materials.

[sarawilcox]

There is some guidance out there on writing long descriptions but we're not finding many good examples of long descriptions in the wild.

This GOV.UK page makes the charts accessible by providing access to the data in a table, not through a long description: https://www.gov.uk/government/statistics/public-spending-statistics-release-february-2020/public-spending-statistics-february-2020.

A Welsh example, where they’ve included long descriptions under bar charts. Poverty and deprivation (National Survey for Wales): April 2021 to March 2022 | GOV.WALES

And a GOV description of infographic 1: https://www.gov.uk/government/statistics/transport-statistics-great-britain-2021/transport-statistics-great-britain-2021