We’ve all heard the phrase “A photo is worth a thousand words”, this statement holds true for the design of websites as well. Images make content easier to understand for many people; however, people with vision problems and cognitive disabilities cannot see the images or cannot comprehend them fully. How do we as designers create inclusive websites that communicate the meaning of the image to a spectrum of users?
For creating accessibility, it is helpful to review what will be the use case and who will be using a specific website and why; this helps us as UX designers to:
- Prioritize our images
- Think of their purpose & category while designing
- Understand what is the nature of supporting text alternatives required to communicate the meaning clearly
This blog talks about the considerations to make these images accessible via supporting text or alt text.
To understand what an image communicates, let’s look at the Web Content Accessibility Guidelines (WCAG 2.0) to help us to understand two key aspects:
- Define the ‘type’ of an image
- Define the alternative text
Type of an image
Before we dissect an image and examine its description, we first need to decide when to use a particular image to convey intent. For each image on your webpage, determine which category best describes your image:
- Conveys information (e.g. photograph, icon, logo)
- Conveys complex information (e.g. chart or graph)
- Purely decorative
Confused about how to decide when to use a particular image to convey intent? You can use WCAG tools such as Decision Tree to determine what category a particular image fits into.
Next steps, we need to provide an appropriate text description for these types of images. Let’s read further:
Defining alt text: Alt text provides a textual alternative to images in web pages and may be vastly different based on the context.
1. Images that convey simple information
For images that graphically represent concepts and information, typically pictures, photos, and illustrations, the alt text should be a short description conveying the essential information presented by the image determined by:
-
context,
-
content and
-
function
Let’s consider this pancake image (below), and its alt text depending on the context.
Example 1
When this image is displayed on a food delivery website, the image intends to inform the user about the description of the item. Therefore, the alt text should give a detailed description of the item.
Okay alt text: <pancakes>
Good alt text: <stack of pancakes served with blueberry and banana, layered with maple syrup>
Example 2
In this example, the pancake image is used as a banner and hence does not provide any extraneous information. Hence the alt text should be an empty attribute. When you provide empty/null alt text (alt=“ ”), the image is skipped over by assistive technology such as screen readers. But if no alt attribute is provided the screen reader will read the file name, causing distractions to the user.
Example 3
The above image has a function as it is a link. In such cases, the function of the image must be presented in alt text that is also within the link. In this case there is no adjacent text within the link to describe the function, thus it must not have an empty alt attribute. Therefore appropriate alt text is blueberry banana pancake.
Example 4
In this case, both the content and function of the image are presented within the link, so the image can be given an empty alt text to avoid any redundancy.
2. Functional images
Images are used not only to provide information but also to convey important functions such as navigation. Let’s look at the following two examples from Gmail here:
Example 5
The ‘compose’ image is part of a navigation, it conveys both content and has a function. The image displays the word ‘compose’ and is also a link to composing a message. Here the alt text should be compose message. There is no need to provide alt text such as ‘link to compose message’, as the screen reader will identify it within a link itself.
Example 6
For icons, the alt text must describe their function on the page. For this example, the appropriate alt text is download this document.
3. Images that convey complex information
These images comprise of graphs, diagrams and infographics. For such cases, the best practice is to provide a detailed description within the same page, instead of a separate external link. Let’s see the example below:
Example 7
Rather than providing alt text that describes all the details of the complex image, an alternative is to provide a long description within the webpage and provide a simple alt text saying that more details are provided below. Source
Example 8
For charts, in addition to the typical color-coded display, it can be presented as a table giving users the option to toggle between the two. Inline alternate views for data ensure that a wider group of users can easily access this information.
4. Purely decorative images
Provide a null alt text when the only purpose of an image is to add visual decoration to the page, rather than to convey information important to understand the page. In the example below, we can test the usefulness of the image by removing and visuals.
Example 9 Source
In the first image, there is an underlying text “unlock customer insights and increase your revenue” with a background image of two women. The second image has the exact text without the background image. The image is discernible without the background image, hence it requires an empty or null alt text.
Here are some essential rules regarding alt text attribute on your website:
|
Do’s Describing the image as specifically as possible. It should be:
|
|
Don’ts
|
Final thoughts
Can writing <Alt> text can help us be better designers?
Creating good alt text should be part of the UX writing process rather than just leaving it to web developers or accessibility testers to figure it out. The valuable aspect of thinking about alt text as a designer forces us to think about the meaning & purpose of the image and prompts us to iterate and improve.
References
https://www.deque.com/blog/great-alt-text-introduction/
https://webaim.org/techniques/alttext/
https://www.w3.org/WAI/tutorials/images/informative/
https://moz.com/learn/seo/alt-text
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
https://www.csun.edu/universal-design-center/best-practices-accessible-images
https://www.nomensa.com/blog/2017/making-your-site-accessible-infographic
https://usability.yale.edu/web-accessibility/articles/images
Vanita Verma is a Research Associate at the User Experience Center. Prior to joining the UXC, she worked as an urban designer at Delhi Urban Art Commission, a government think tank based in New Delhi. In her role as an urban designer, she worked on exploring innovative approaches to improve the city through various scales of urban projects encompassing from local area plans to heritage impact assessment for a national monument.
Vanita holds a Bachelor of Architecture degree from the National Institute of Technology, Hamirpur, and a Master of Architecture degree from the Centre for Environmental Planning and Technology, Ahmedabad where she specialized in Urban Design. She is currently pursuing her Master of Science in Human Factors in Information Design at Bentley University.
