Note: this blog will use the term “image” as a shorthand for visual (non-text) content to aid brevity.
If you have attended the Introduction to Digital Accessibility or Creating Accessible Documents training sessions that Sarny Guzman-Rodriguez and I host a few times per term, you have probably heard us talk about how important it is to add alt (alternative) text to your images and image. It is easily my favourite accessibility feature – alt text provides a textual alternative to non-text content in web pages. In plain English, it is text that describes images and generally visual (non-text) content.
Alt text, however, is not perfect:
- Determining context-appropriate and informative alt text is often a matter of personal interpretation.
- Programmed alt text sometimes has a set length of 125 characters, which limits the information we can include, especially for complex imagery such as charts, maps, and other data-heavy visuals.
- When it comes to complex environments such as Moodle or the Internet, alt text falls short of the multi-modal, highly evocative experience users should have using these platforms. Descriptions should not be limited by character lengths or programmed restrictions, but by the contexts your image operates in.
Alt text operates in a family of what WCAG 2.1 calls “text alternatives” and, broadly speaking, you are likely to use more than one text alternative for image. The following Venn diagram can help you understand how text alternatives are related to each other, both as accessibility features and as terms this blog will use.
Here are 5 tips to improve your use of text alternatives
Ask whether you need a text alternative in the first place
Easy yes-or-no question! This may not happen often, but there will be cases where you do not need any text alternatives. Ask these questions about your image:
- Is it essential to the user’s understanding of the surrounding content?
- Does it offer additional or new information to the adjacent text?
- Is it there to add visual styling?
If you answered NO, NO, and YES, mark the image as decorative. This means that it will be ignored by assistive technologies, such as screen readers. Any text alternatives for these types of images would add audible clutter to screen reader output or could distract users if the description topic is different from that in adjacent text.
Day to day, you can use the W3C’s alt text decision tree to decide whether you need to use text alternatives.
Consider the function and purpose
Is your image informative, presenting concepts and information? Or is it functional, for example a printer icon to represent the print function for a user. Perhaps you are using a group of images to convey a single concept, such as a 5-star rating visual.
Determining the function and purpose of your image will help you decide how to describe it for users. Here is an example:
Alt text: Email Maria Kaffa
Consider the context in which the image is used
Screen-reader users’ time is precious – it takes 3x as long for them to listen to the full content of a webpage than it takes a user accessing the webpage visually . Therefore, it is a balancing act when deciding what information to include in text alternatives, and one that is helped with context.
Context is key to the process of using text alternatives. While we want to communicate as much as possible, it is also important for text alternatives to remain essential and bring new information to users that doesn’t already exist in any surrounding text. Take this image as an example:
Long description: “Sleeping like a Weddell” by Ralf Schneider. A black and white photo of a seal lying on its side, sleeping, with its flippers hugging its body and a content look on its face. The photograph was shortlisted for the Wildlife Photographer of the Year Contest in 2019.
If I was writing an article about the finalists of the Wildlife Photographer of the Year Contest in 2019, perhaps I would have this long description accompany the photo. However, if I was writing a blog about photography techniques in extreme temperatures and icy environments, the long description will likely have different information for the user.
Pay close attention to complex images
Does your image convey data or detailed information? This is the likelihood if it is a graph, chart, diagram, or even a map.
Complex images contain substantial information, more than can be conveyed in a short phrase or sentence. Considering the limitations of programmed alt text, you may need to include more than one text alternative with your image, such as a long description or data table.
A long description is a longer version of your alt text – specifically when alt text cannot be concise or is over 250 characters. If the meaningfulness of alt text is impacted by character limitation, use a long description as a complementary way to capture information.
An accessible data table is especially useful in accompaniment to your image represents statistics. Users can access the data table using text-to-speech software that will detect how the data is organised, which will help users understand what the image is conveying.
Take this (made up) bar chart as an example:
Chart 1: Bar chart representing how City staff and students travel to campus. A clear preference is highlighted amongst students for travelling by bus, while most staff choose to travel by train.
|Mode of transport||Staff||Students|
Test, test, and test again
A good way of testing your text alternatives is working backwards i.e. guessing the image from the text alternative.
Imagine you work at a museum or art gallery and work with a colleague or friend. Ask them to guess a painting from a description you write. If they guess it successfully, you should know you are on the right path! Here is an example you can use:
Painting description: The painting depicts a woman of the people leading a varied group of people forward over the barricade and bodies of the fallen. In one hand, the woman holds the flag of the French Revolution – the tricolour, and in the other the bayonetted musket. In the distance the towers of Notre-Dame.
The figure is often seen as an allegorical goddess-figure and a robust woman of the people. The mound of corpses and wreckage acts as a pedestal from which she strides, barefoot and out of the canvas and into the space of the viewer. The fighters are from a mixture of social classes, ranging from the bourgeoisie represented by a young man in a top hat, a student from the prestigious École Polytechnique wearing the traditional bicorne, to the revolutionary urban worker, as exemplified by the boy holding pistols.
The painting has been seen as a marker to the end of the Age of Enlightenment, as many scholars see the end of the French Revolution as the start of the Romantic era.
Training, support, and guidance
- Log a ticket on ServiceNow
- Staff Digital Accessibility Guidance
- Students Digital Accessibility Guidance
- Staff Digital Accessibility Community
- Student Digital Support Community
- Take the NEW Introduction to Accessibility Moodle module
- Inclusion & Accessibility Ed Tech workshops
- LinkedIn Learning courses collection