Accessibility in Design
Alt Text: a tactical primer for UX Designers
Imagine: you’re scrolling through a page online — there’s a title, a subtitle, 3 paragraphs… and an empty box (“Broken image link”)?
Oh darn… I wonder what could be this image displaying that I’m unable to enjoy? I wish there was some alt text.
Images need alternative text, or “alt text.”) This is often one of the first things designers and developers learn about accessibility, along with headers, font size, and descriptive links. Adding alt text is simple (I’ll get to that in a minute), and browser-based tools like axe and WAVE can help automatically detect when images have alt text or not.
We primarily use text to help understand the meaning of things. The accessible text should convey clarity and be intentional. So in order to write appropriate alt text, it’s important to identify your audience and the purpose of the image.
Who uses alt text?
There are two groups of people you should consider when using images: those who can see the image and those who can’t.
It may seem obvious that you’ll need to present information in an alternative format for people who can’t see images — those who are blind or visually impaired. But they’re not the only ones who would benefit from alt text! Users with slow internet connections — particularly in developing countries, and users who may disable image loading would have a use for alt text. With the option to turn off images, the page displays alt text in place of images and allows for content to load faster.
Other users with cognitive disabilities or learning disabilities might turn off images as well to minimize distractions to help them understand the text easier. But the solution wouldn’t be to use fewer images or remove them completely. Instead, images should be used gracefully with alt text to enhance the experience.
To use alt text, or to not use alt text?
I just made a lengthy introduction on why designers and developers should include alt text but not everything needs alt text. A general rule of thumb is that alt text should add or enhance the experience, not become redundant. For example, if the screen reader recites an image caption followed by the same text written for alt text, the experience is busy and excessive. In this case, the caption inform users why the image was included (i.e. “The best time to pick honeycrisp apples is in September”) while the alt text should describe what the image looks like (i.e. “Medium-size red apples with yellow and green hues hanging from tree branch”).
Images that exist for purely aesthetic reasons or repeat information that already appears on the page as text can be marked as decorative images. For example, if you have a book icon on a page next to a “Required Reading”, that image can be marked as decorative because it is being used just to make the reading stand out.
Alt text usually goes within an <img> tag. For example:
<img src=“/image/upload/chewbacca.png” alt=“shaggy-haired, bear-like warrior”>
And if your image was decorative, you’d simply leave the alt text empty:
<img src=“/image/upload/chewie.jpg” alt= “ ”>
Determining if an image is decorative or not is a fine balance or providing too much and too little information to users. If there are certain images or icons that are used frequently, you could create some guidelines around how to approach alt text for those images to maintain consistency.
Tips for writing ‘good’ alt text
Be specific, and succinct
Because screen readers may have a cut-off for alt text around 125 characters, think of writing alt text as composing a viral Twitter post. Describe the content of the image without making assumptions beyond what is seen in the frame. A few words are enough to describe the images but sometimes, a full sentence is necessary.
Skip saying “image of…” or “picture of…”
Screen readers already know that there’s an image (based on the <img> tag in HTML) and they announce this before reading the image description. So instead of reminding users that there is an image, inform users by explaining the type of image (e.g. headshot, illustration, chart, screen capture, etc.). This information could be helpful in adding context to the image.
Include text that’s part of the image
If an image contains text, include it in your alt text description. However, if you include this text elsewhere around the image, don’t repeat it!
Describing race and gender
Personally, I suggest describing race and gender only if:
- it is relevant (it adds to the context)
- it is known (no guessing)
- it is consistent (you describe all races and genders not some)
In many situations, mentioning race or gender is not relevant to the context at all. It’s often better to say “person” or “people” and talk about physical characteristics like hairstyle, clothes, glasses, or facial expressions.
Share humor
While descriptive text may look like serious business, it doesn’t have to be overly formal. If an image (i.e. a comic strip) is intended to be funny or convey a joke, express the humor so that the user can experience that!
With Aldi’s ad of a lemon on a pear with some song lyrics from Livin’ on a Prayer by Bon Jovi, here are some possible lines of alt text:
- A lemon and a pear
- “Wo-oah, we’re halfway there, wo-oah…” and a lemon on a pear
- Text above reads: Wo-oah, we’re halfway there, wo-oah… A lemon on a pear. [References to lyrics from Livin’ on a Pray by Bon Jovi]
The last alt text, while not perfect, is the most descriptive with explaining why the image is funny by reference the original pun inspiration. If the alt text was just “a lemon and a pear”, users wouldn’t quite understand why the image is funny.
In conclusion: alt text is important
The first guideline of the Web Content Accessibility Guidelines 2. talks about including text alternatives for non-text-based content.
Incorporating alt text is an easy way to check accessibility as a designer. Beyond that, the act of writing alt text forces designers to set intentions for images. If you are unable to write alt text for an image, you are unable to illustrate the point of your image. Perhaps that image wasn’t necessary for your creation and if it was important, how do you ensure an equitable experience?
[UX COURSE RECOMMENDATION]
Inclusive UX: Designing Websites for Everyone
Want to take your accessibility skills to the next level? This quick and actionable Skillshare course includes:
- Tools to measure the accessibility of your product
- Resources for implementing inclusivity in your designs
- Key considerations for user research and testing
You’ll get 14 days of free Skillshare premium when you sign up with our educational partner link. Happy learning!
