Creating accessible content is the right thing to do, both legally and morally. Sometimes the steps required to make content accessible can seem daunting, and the impact is not always obvious. Is it really worth all the extra time and effort? Does it really make a difference?
Inspiration for following accessible practices can be found in the strangest places – like a distant universe…
“A picture is worth a thousand words”
A well-made infographic, diagram, cartoon, or photograph can help illustrate a complex concept in an engaging format. There’s no denying the value of quality images in learning, but how can we ensure that those images don’t unintentionally exclude learners?
FOMO – Fear Of Missing Out – nobody likes to feel like they are being excluded from something, whether it’s an inside joke, a social invitation, an acronym or topic you don’t understand, or content you can’t see.
When we think about visual impairments we usually think about permanent and full vision impairments, but they can also be temporary (for example a learner may have an eye injury or surgery that will heal over time, or have lost their glasses and be waiting for a replacement), and can vary in impact across a spectrum. We also must consider technical limitations, such as learners with a poor internet connection or those using mobile data who may not be able to load media, or those with a low-quality or damaged screen who may be unable to see details.
Inspiring Alternative Text
Alternative text (or Alt-Text for short) is text that describes the content of an image. It can be accessed by screenreaders and braille devices, and it is even displayed when an image fails to load. Adding alt-text to images in most software or platforms is easy (see the Images section of the UCEM Accessibility Awareness Course) but writing effective alt-text that conveys the meaning of your image, especially if that image is complex, is trickier.
On the 12th of May 2022 I delivered a workshop on writing effective alt-text for images using a strategy called Focus Locus from TextBox, as shared at the Making Content Accessible in your Moodle conference in 2021. The slides from this session, and the recording of the session can be accessed from the Online Learning Research Centre page of the Intranet. I hoped that this workshop would provide a good starting point for those looking to making their learning content more accessible.
In the workshop, I used a photograph of Buzz Aldrin on the moon to illustrate the steps of the process. I was happy with the alt-text for the image that was generated in the session but agree that it could be improved. I struggled planning the session trying to find a good example of alt-text for a sufficiently complex image to demonstrate good practice. It is perhaps fitting then, that one of the best examples of effective alt-text for complex images has also come from space.
The NASA WEBB telescope released its first set of the deepest and sharpest infrared images of the distant universe to date on the 12th July 2022. Not only was the internet abuzz with excitement over the images themselves, the quality of the alt-text associated with the images also garnered significant praise.
? The alt text on the recent @NASAWebb first images posts were written by a small team at @stsci, including myself and @timrhueii. It was a collaboration between SMEs, scientists who focus on outreach, education specialists, and professional science writers.— Kelly Lepo (@KellyLepo) July 13, 2022
Below is an example. Read the text and try to visualise the image it describes.
The image is divided horizontally by an undulating line between a cloudscape forming a nebula along the bottom portion and a comparatively clear upper portion. Speckled across both portions is a starfield, showing innumerable stars of many sizes. The smallest of these are small, distant, and faint points of light. The largest of these appear larger, closer, brighter, and more fully resolved with 8-point diffraction spikes. The upper portion of the image is blueish, and has wispy translucent cloud-like streaks rising from the nebula below. The orangish cloudy formation in the bottom half varies in density and ranges from translucent to opaque. The stars vary in color, the majority of which, have a blue or orange hue. The cloud-like structure of the nebula contains ridges, peaks, and valleys – an appearance very similar to a mountain range. Three long diffraction spikes from the top right edge of the image suggest the presence of a large star just out of view.NASA, ESA, CSA, STScI
Now follow this link to the image – how well do you think they did?
By taking the time to construct effective alt-text, the NASA WEBB team were able to share their findings more widely and in a more inclusive manner, allowing users who were unable to engage with the images to still participate in the experience. In addition to providing an example of good practice, the positive impact has also been highlighted as users share their experiences (see, for example, this article “The unexpected star of NASA’s Webb images — the alt text descriptions” from the Washington Post). I’ve now got some excellent examples to use in my next workshop, as well as inspiration for putting in the time and effort to make my own content accessible.
If you are looking for more accessibility inspiration check out the Accessibility Awareness (@A11yAwareness) twitter account, which regularly shares useful accessibility tips and guidance. Below are some of my favourites that I have found particularly useful when considering alt-text.
A sighted user can’t look at a photo of a house and know what year the house was built or what it cost. Thus, it’s not appropriate to put that in the alt text. Put that in the caption if it’s needed. It’s only appropriate for alt text if that info is explicitly in the image.— Accessibility Awareness (@A11yAwareness) July 20, 2022
If you tweet a flyer image for an event and don’t add alt text, blind people won’t get the details they need to know to come to the event. But if the alt text simply say “event flyer,” they still won’t know to come. The alt text needs to give them information to be able to come.— Accessibility Awareness (@A11yAwareness) July 18, 2022
When writing alt text, ask yourself why the image is there in the first place, and what is the vital information it provides for people who can see it. That will help you identify the most important details you need to put in the alt text. Putting too much in could overwhelm.— Accessibility Awareness (@A11yAwareness) July 16, 2022
Taking the first steps
Doing alt-text well is certainly not a quick and easy task, especially in the beginning, and it may be tempting to remove images altogether in the interests of accessibility but remember – doing so will then disadvantage learners who benefit from visuals! There is no ‘one way’ of presenting content that will appeal to (or work for) all learners, but if we can take the time to make information available in a variety of formats it will go a long way to making our content more inclusive. It won’t happen overnight, but we can all make small commitments to increasing the accessibility and inclusivity of our content going forward.
Why not start today by selecting one of your own images and following the focus locus approach to construct some effective alt-text. For a full explanation of the process, watch the recordings linked at the top of this post. In short, the ten steps of the process are:
- Focus: Select the main subject of the image, the focus, and build the description around this element using the additional details within the image (locus elements).
- Structure: Enable the user to visualise the image.
- Context: The context of the image is critical and determines the focus of the description.
- Style: Alt-text must be written with a simple sentence structure. Avoid complex punctuation, characters or organisational elements like bullet pointed lists as screen readers will not recognise them.
- Detail: Include all relevant details to encourage user understanding.
- Use Descriptive Language: Use precise and evocative language to convey meaning and encourage immersion.
- Describe, Do Not Interpret: Be impartial and convey the same information available to a sighted user.
- Brevity: It is good practice to limit the alt-text to 1-3 sentences. If your character count is limited, include extra content in the surrounding text or caption, or link to the raw data
- Put Yourself in the User’s Shoes: Think about what information the reader needs from the image.
- Accuracy: Test accuracy by trying to visualise the image from the completed description (or ask a colleague to help!)
These ten steps may seem arduous, especially if you have a lot of complex images in your content, but keep in mind the person you may be inspiring by taking those extra steps to include them, and the impact it will have on their experience.
As a blind person who has had dreams of doing astronomy since I was 6 … thank you to whoever not only remembered to write alt text for this — but did so in such a beautiful way. I’ll likely never know who you are. But you touched my heart this day, alt-text writer. ? https://t.co/PkPj9vlIuD— Katie Mixtochtli – use alt text (@Conundrum9999) July 12, 2022
Learning Technologies Production Manager