Note, I am not an expert on accessibility. I was curious and wanted to dig into a thing I didn’t know much about and this article is my learnings. Let me know I’m wrong in the comments, we’ll all learn from my mistakes. This article is going to skip over the “does accessibility matter” question that has already been answered in a million other articles–the tldr is yes, and y’all best get on board.
What is alternative text?
Alternative text is really simple. It’s just a textual description of content that isn’t text. WCAG 2.0 documents it as follows:
"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose"
Basically we want all content to be universally accessible regardless of a person’s context and situation. And we can generally rely on computers to help us achieve this goal.
Computers are real good at interpreting textual content and outputting that text in whatever way a user wants. Computers can manipulate the size and color of text, can read text audibly or even send it to a braille display. But they cannot do the same with non-text content (images, video, audio). So to make that content accessible we need to provide alternative text so computers can output that content in whatever way a user wants.
Enter the alt attribute
While alternative text is necessary for all non-text content we’re focused here solely on images and even more specifically the <img> tag. If you were unaware, the alt attribute is an attribute on an image element that used to provide fallback or alternative text when an image can’t be loaded or viewed. It is the text contained in this attribute that screen readers will read aloud or send to a touch device whenever an image appears. (source)
<img src="img/kanyewest.jpg" alt="Kanye West performing on a well lit stage">
When is the alt attribute (not) required?
The WCAG states that all non-text content requires alternative text. To the average person (or me at least) this requirement is vague and all encompassing. It generally implies that all images should have and alt attribute. And while true to an extent, it is possible to have too much of a good thing. There are times when including alt text is actually detrimental to accessibility. So a good rule of thumb is to operate as if every piece of media requires an alt attribute except when:
The image is purely decorative.
In this situation the image isn’t content, it’s glitter and no sane person likes glitter. If an image serves no purpose other than stylistic goals then it doesn’t need alt text and is actively unhelpful to people using screen readers. Some examples of this are dividers, list icons and decorative background images.
The alt attribute is redundant.
Take for example, a picture of a cat on your personal portfolio. Immediately below this photo you’ve added the caption “Thomas my beloved chunky cat, sitting on a stool.” In this situation adding an alt attribute would cause redundancy with information already present on the page. Screen readers would read the same content twice. If the content is already present on the page in text, there is no reason to repeat yourself.
When an image is used as a control or user input.
This one is tricky because it still needs alternative text. But the alt attribute might not be valid html or the most helpful way to provide that alternative text. Accessible forms and inputs is another article but know that if people can’t use the contact form on your website you have a problem.
What makes good alt text?
Alright, so we generally know when to include or not include alt text. But what do we actually write? The key ingredient here is “meaning.” Why is this image on your webpage? Why did you include it? What is it you hope people take away from this graphic. If you can answer those questions you are well on your way.
Good alt attributes are appropriately descriptive
Both images are of a dog but the meaning they convey is entirely different. Wouldn’t be too helpful if both of these images images just had “dog” as their alt text would it? Sure, the primary subject of the photo is defined but the meaning contained in the image is lost. The first image instead could be written as, “Golden Retriever puppy gently holding a tulip in its mouth,” and the second image, “Black dog with orange collar barking and baring its teeth in a misty forest.”
Good alt attributes are accurate and concise
While alt text should be descriptive of the image too much description can be a bad thing. The following image illustrates this nicely:
For this anti-example, let’s pretend that
alt = “A bearded man drinking from a white paper cup whilst sitting on a leather couch in front a window. The window implies he lives in an urban region. He’s wrapped from the legs down in a blanket and is wearing a long sleeve denim shirt to match his equally hipster beanie. There’s a coffee table in the foreground on top of which rests headphones and two iPhones. I don’t know why you need two phones.”
Perhaps such descriptions could be suitable for a novel but not for the purposes of internet browsing. It’s well known that people skim articles more than they actually read through them line by line. Creating for accessibility should bear this in mind and provide the content and intention of the image without being overly descriptive. “Man drinking coffee at home,” would likely do it for this image.
Good attributes are specific to the function of the image (example: image links)
It’s easy to forget that images can be used for more than just displaying graphical content. Images can also imply functionality, (e.g. a next arrow). Contrasted with the examples above, such images often only require short amounts of alternative text. Maybe even a single word is enough. The home icon in your web app? You only need to say “home.”
Good attributes recognize that context is key
At the risk of beating a dead horse it’s worth mentioning that context can make or break your message. It’s important to focus on the details of an image that matter for your audience and ignore those that don’t. Example time:
The above picture of a cresting wave is on your travel blog. Your travel blog might utilize alt text that mentions, “stunning waves can be seen from the shore.”
Or perhaps you work for the local parks department and are writing about the unusually high amount drownings this year. You might instead mention, “Tumultuous waves on Ruby Beach.”
Again focus on what matters. Consider why the image is on your site and don’t forget to avoid redundancy in your alternative text.
Often forgotten: Good attributes use punctuation
Yes, use punctuation in your alt attribute. Periods and commas will affect the cadence of screen readers the same as any other text. This is especially important when the attribute gets a little lengthier.
3 things to avoid
1. “Image of…”
As stated earlier we do not want alternative text to be redundant. It’s a common mistake is to repeat things inherent to html. For example, “image of…” is redundant because screen readers would have already declared the html element as an image.
2. Background images for content
**When this article was written background images were a more common practice. This is no longer the case but the information is still true**
It’s super tempting to use background images to place images in a layout. They’re responsive and don’t result in images stretching/skewing in odd and unexpected ways. You can additionally use “cover” to crop an image in any way you’d like. While easy to do, this is bad practice.
When you move images out of the imgtag you loose much of the accessibility tools baked into semantic HTML. Additionally, an empty div with background image cannot have an alt attribute in the first place and thus, aren’t considered accessible.
A better alternative would be to make use of the object-fit property. It replicates the functionality of a background image without any of the accessibility detriments. Make the switch today!
3. Alt text and Emoji 👻
Emoji are not presented as images which means there is no alt attribute, so don’t include one. However, you must decide whether the emoji carries meaning or if it’s purely decorative. If it does, give the emoji an img role and descriptive aria label. If not, make use of aria hidden. (source) (img role)
Alternative forms of alternative text
LongDesc
There comes a time when an alt attribute is just not gonna cut it. Complicated charts, flow maps, infographics and full screen diagrams are all prime examples of when a user might benefit from something akin to the longDesc attribute which points users to a full length description of the image. For better or worse longDesc has been deprecated in HTML5 but is still recommended by the WCAG. This has obviously resulted in heated debate and confusion. Some current alternatives to the longDesc are simply wrapping the image in an anchor tag or using aria-describedby.
Aria
Accessible Rich Internet Applications (aria) are extremely powerful tools and attributes that help you craft a pages HTML for the benefit of people using screen readers. While a bit out of scope for this specific article, aria opens up a lot of possibilities in terms of improving accessibility. Definitely check out Mozilla’s documentation or this Aria Grande post when you have a moment.
Further reading
- SEO Guide to Lighthouse Performance Metrics
Search Engine Journal - SEO Accessibility
Search Engine Journal - Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO
Hubspot - Alt Text for Images — Examples & 2021 Best Practices
Moz - Images, Icons and Emoji
UpYourA11y
