Posted on by

Alt-Text and #UnfoldTheUniverse

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…

Image of a group of five galaxies that appear close to each other in the sky: two in the middle, one toward the top, one to the upper left, and one toward the bottom. Four of the five appear to be touching. One is somewhat separated. In the image, the galaxies are large relative to the hundreds of much smaller (more distant) galaxies in the background. All five galaxies have bright white cores. Each has a slightly different size, shape, structure, and coloring. Scattered across the image, in front of the galaxies are number of foreground stars with diffraction spikes: bright white points, each with eight bright lines radiating out from the center.
Stephan’s Quintet (NIRCam/MIRI Composite Image) – Credit NASA, ESA, CSA, STScI (Public Domain)

“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.

Astronaut Buzz Aldrin standing on the surface of the moon during the Apollo 11 moonwalk. The reflection in the visor of his spacesuit shows the photographer astronaut Neil Armstrong and the earth.
Buzz Aldrin on the moon. Credit- Neil Armstrong, Public domain, via Wikimedia Commons

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.

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.

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:

  1. 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).
  2. Structure: Enable the user to visualise the image.
  3. Context: The context of the image is critical and determines the focus of the description.
  4. 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.
  5. Detail: Include all relevant details to encourage user understanding.
  6. Use Descriptive Language: Use precise and evocative language to convey meaning and encourage immersion.
  7. Describe, Do Not Interpret: Be impartial and convey the same information available to a sighted user.
  8. 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
  9. Put Yourself in the User’s Shoes: Think about what information the reader needs from the image.
  10. 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.

Published by Caroline King

Learning Technologies Production Manager