Research insight: accessibility of images
Posted on by Henny Swan in Testing, User experience
When conducting usability testing with disabled users, we observed how well images performed from both a visual and non-visual perspective when it came to finding and understanding content.
We often think of accessible images as having alt attributes with appropriate text descriptions for people who can not see or understand them.
What gets overlooked is whether the visual content of the image is appropriate to the context of use for people with sight. Equally, if the text description fits in to the flow of adjacent content.
The participants
Six people with disabilities were invited to test a news website on a desktop. Participants included:
- One person with dyslexia and ADHD
- Two people who were blind browsing with a desktop screen reader
- One person with low vision who used zoom when browsing
- One person browsing with speech recognition with ADHD
- One person with low vision browsing with screen magnification
The task
Each participant was asked to find an article about disability on the homepage and by using search.
Each article consisted of an image, heading and text presented in that order both visually and in the code. The image was positioned on top as a rectangle, the heading underneath, followed by a date and name of the author, then short text introducing the topic.
In most cases, the heading stretched over two to four lines and was roughly 10 to 17 words. Most, possibly all, of the images were stock photos.
Observations
Relevancy
When the visual content of the image and its text description did not complement the heading it was grouped with, it negatively impacted people's understanding of the page.
For example, when looking for an article about disability, our participant with dyslexia and ADHD didn't read the long headings. Instead they looked at the images for context but couldn't find any about disability:
It's helpful with the imagery for articles but I'm not necessarily sure that pictures actually go with the titles that much. For me images are always helpful to sort of sum up what something is about quite quickly [...] but some of them don't really seem actually relevant.
Our participant who was browsing with speech recognition and had ADHD didn't connect the visual content of the image with the heading and commented:
The picture seems artificial; I guess it's a stock photo.
Similar issues were experienced by both screen reader users, who said text descriptions of images often did not convey any useful information. As one commented:
The description just says 'diversity', what does that mean? It tells me nothing about that graphic.
Consistency
Both screen reader users commented on the inconsistent quality of text descriptions.
Some text descriptions gave context, for example, "A disabled woman at work" for an article about disability at work. Other text descriptions were just a single word which was not helpful:
A graphic called covid is amusing. What picture is that!
The other screen reader user, mentioned inconsistent text descriptions. They also noticed some images didn't have a text description and commented the experience was "disjointed".
Other images were followed by a caption, so blind participants knew an image was on the page but could not tell what it contained. They found this annoying and made them wonder what content they were missing:
The images on news articles are often not labelled. It just says "getty image istock" or whatever, it doesn't say what the image is a picture of.
Reading order
On the search results page, images preceded the heading it was associated with which caused one of the two blind participants to navigate to the wrong article.
Wondering what the image with a text description "diversity" contained and referred to, he decided to read the related article. Instead of selecting the article title that followed the image, he selected the one that preceded it, and never realised his mistake.
Research insights
Decorative images do more than just decorate a page, they also provide context, regardless of whether you can see an image or not.
Our key research insights are:
- Avoid the use of generic images and stock photos, they can add to confusion rather than add value.
- When choosing images, ensure visual content is relevant to the adjacent content such as headings and text. For example, pick an image that has a strong visual connection to key words in a heading.
- When writing text descriptions, ensure the editorial describes the image with language that naturally flows with the adjacent content. For example, if the heading is "Disability in the workplace", pick an image that shows someone with a disability at work and a text description that says something like "A woman in a wheelchair gives a presentation in the office".
- Use a consistent approach to writing text descriptions to help build comprehension for people who are blind.
- Carefully consider where in the content order, an image appears. Images should follow the a heading in the code order. They can be positioned above a heading using CSS as long as visually the image, heading and associated text are grouped together. This can be done using a line to separate each article, or a box.
Next steps
Read more about moderating usability testing with people with disabilities, analysing findings and how we can support you with our agile user experience testing service.