Inclusive UXR - Alt Text for Affective Images
In this project, I collaborated with an inclusive user research team at a leading US pharmacy to investigate how we might communicate a image's tone or feeling to non-sighted users.
​
Some information is removed or modified due to confidentiality.
The research problem
Text alternatives to images ("alt text") is essential for blind and low vision users to experience a website. To be useful, alt text should be succinctly describe the purpose of an image.
There are many cases where writing alt text is more complicated than a simple description. Images chosen by marketing teams, for example, are often chosen with the intent of making users feel welcomed or demonstrating that customers had a positive experience. By marking these images as decorative, non-sighted users would miss out on this information.
The question
When the primary purpose of an image is to communicate a feeling, how might we communicate that feeling to non-sighted users?
The team
My role
Method
We created three Figma prototypes of our company’s homepage. Each prototype contained the exact same images, but we worked with a strategic content writer to craft three different versions of image alt texts with varying levels of detail:
Minimal detail
alt = "A smiling older couple enjoying the outdoors together"
More detail, but still concise
alt = "An older couple sit outside in a casual embrace while looking at each other and laughing"
Elaborate with lots of detail
alt = "Outside in a park in the warm glow of the afternoon sun, an older, well-dressed bespectacled couple sit in a casual embrace and laugh at an inside joke"
We collaborated with Fable to recruit nine screen reader users to participate in our virtual study. To control for differences between how different users might experience the prototype, we recruited participants who used three different screen readers.
To minimize recency bias or preference for any alt text version based on the order in which it appeared, we randomized the order in which each participant encountered the different versions. We asked users to interact with pages and provide their reactions to each image’s alt text as they heard it, and asked questions like:
-
The first time you visit a website, how do image descriptions contribute to your experience?
-
Is the image meaningful in the context of this session?
-
What do you think this image is trying to communicate?
-
Why do you think this image was chosen?
Key learnings
-
Participants appreciated when alt text evoked a feeling or emotion, which was often a new experience for them. However, alt text that was overly descriptive was distracting. Most participants said they'd never heard such "narrative" alt text before and expressed delight that they were able to access the full purpose of the image. The most elaborate version of the alt text, though, was too much for most users - it was too much information to remember and absorb.
-
Alt text provides more information than you think. Though all images we tested were considered decorative by marketing teams, users gathered information from them - for example, who was eligible for certain vaccination programs.
-
Alt text need to be obviously related to surrounding content to be worthwhile. If images were not related to nearby headings or text, users were distracted and did not understand why the images were included at all.
Impact
Strategic impact
-
Images conveying affective information will no longer be marked as decorative
-
Results presented to over 300 designers, content writers, and product owners across the digital organization to encourage choosing images to support content, rather than to simply fill space
-
Content writers will begin including appropriate levels of detail in their image descriptions
Next steps
-
Further research to understand the amount of detail presented in alt text for affective images
-
We will collaborate with content writers to communicate the level of detail screen reader users enjoy in alt text
-
We will partner with content writers and marketing to choose and describe images that effectively convey emotion to both sighted and non-sighted users
Questions I'd love to explore further
Due to time and budget limitations and limitations with Fable as a recruiting platform, there were some questions we couldn’t explore. Questions meriting further research include:
-
How does the users’ level of screen reader expertise impact their alt text preferences?
-
Do people who were born sighted and people who were born blind have different preferences?
-
How does the placement of images on the page impact users' overall experience? Where should images be located in relation to accompanying text?