An Alt-Text Primer
In my post last month about Screen Readers and HTML Accessibility, I touched on some fundamental aspects of how the screen reader navigates the page and makes the web browsing experience more perceivable and operable for users with visual disabilities. I also mentioned that many newcomers to coding first hear about screen readers and accessibility in the context of images—specifically, the alt tag used within <img> HTML elements. As promised, I'm returning to explore that topic in more detail today.
What is Alt-Text?
Alternative text, often shortened to 'alt-text,' is precisely what it sounds like—a text alternative for a non-text element, such as an image or graphic. Mozilla's MDN Web Docs describe that the HTML alt attribute is a container for text describing an image. A screen reader will grab the text in this alt tag and read it in place of the image.
Beyond screen reader accessibility, there are other benefits of the alt tag, too; it's what renders in place of an image that can't load (perhaps due to a bad internet connection or a broken link), and it also factors into the visibility of a website on search engines (Search Engine Optimization, aka SEO).
The MDN Docs state that an alt tag "isn't mandatory but is incredibly useful for accessibility." This is technically true in that omitting the alt tag won't bring a page crashing down like a misplaced comma or forgotten closing tag will. But in practice, if there is one takeaway that you get from this post at all, it's that alt tags should always be included on our images.
What Happens if I Don't Include Alt-Text?
Adding alt tags to images is often considered low-hanging fruit for making a website more accessible, and yet inaccessible images remain one of the most common issues. By not including alt text, we risk depriving our screen reader users of important information and added context that images provide to our sighted users.
There are a couple of different things that a screen reader might do when it encounters an image without an alt tag:
- Read the image's
srctag (typically the image's URL or filename) in place of the image. If the filename is descriptive of the contents, this could be better than nothing. Often though, this is something like 'IMG_1598.jpg' or a lengthy Google Images link that reads like a jumble of random characters. - Announce "image" or "graphic" and leave it at that. What is contained within the image will remain a mystery to the user—was it a graphic important to their understanding of the surrounding material or a piece of decorative clip art?
You can see and hear an example of how screen readers interpret an image with vs. without an alt tag in the brief example below, which demos two standard screen reader technologies (VoiceOver for Mac and ChromeVox):
For those who want another practical perspective of how alt-text can go wrong, check out accessibility engineer Steffany Newman of Web Accessibility Education's video showing examples of poorly executed alt-text on a popular e-commerce website you may have heard of before:
What Should I Include in my Alt-Text?
Shakespeare's Hamlet might have said that "To be or not to be?" is the question, but that was before the internet came along and web developers, designers, and content creators were faced with the actual ultimate question: what goes inside that alt attribute we've been discussing? The answer is: "it depends." However, there are a few important points to remember that can guide us.
alt tags for decorative images should be empty
Our gut reaction to hearing that we should include alt tags on all of our images might be to say, "Okay, I'm going to include alt-text on every. single. image. on my website." However, there's a difference between including an alt tag on every image and including a text description inside each tag.
As it turns out, not every image needs a description. If it's a purely decorative image—that is, it doesn't include any meaningful content, it's only used for layout, and deleting the image wouldn't do anything to impact the understanding of the surrounding text for our sighted users—all we need to include in the alt tag is an empty string (you may also hear this referred to as a null alt attribute). This tells the screen reader that it can ignore the image.
(By KEN111 via the Noun Project, CC-BY 3.0)
<!-- Don't Do This: -->
<img src="pretty_flower_border.jpg" alt="Floral Border">
<!-- Do This: -->
<img src="pretty_flower_border.jpg" alt="">
Adding a text description where it isn't needed will add (literal) noise to the screen reader's readback of the page. Not having any alt tag would cause the same issue, as the screen reader assumes an alt tag should be there and tries to find a substitute. An empty alt tag will prevent both of these pitfalls.
alt tags shouldn't include "image of" or "graphic of"
Another thought we might have, being the well-intentioned people we are, might be, "Hey, I should include 'image of' as part of my alt-text so that the user knows what's being read is a description of an image." Kudos for being thoughtful, but doing that would be unnecessary, repetitive, and redundant. Screen readers typically announce 'graphic' or 'image' before reading the alt text.
(By mauser via Wikimedia Commons, CC-BY-SA 3.0)
<!-- Don't Do This: -->
<img src="untitled_goose_puppy.jpg" alt="Image of a Golden Retriever puppy carrying a plush goose toy.">
<!-- Do This: -->
<img src="untitled_goose_puppy.jpg" alt="Golden Retriever puppy carrying a plush goose toy.">
alt tags should be brief yet represent the content and function of the image
Even though we may feel compelled to describe every minute detail of the image, or add a little pizzazz or extra tidbits of information into our alt-text, we shouldn't give in to that temptation. Our goal with alt-text is to briefly (in a few words or a sentence, no paragraphs here) summarize the information that a sighted user would glean by looking at the picture. If we still want to add something extra, we can always do that within the body of the text or a caption so that everyone else can enjoy our wit or insight.
On the other hand, we must also be careful to include enough information that a screen reader user gets the same context and value from the image as a sighted user would. We shouldn't just describe the appearance of the image, we also explain what we intend the user to understand based on the image.
(By J.K. Nakata, U.S. Geological Survey via Wikimedia Commons)
<!-- Don't Do This: Too Much/Irrelevant Information -->
<img src="Loma_Prieta_Damage.jpg"
alt="A wood-framed house with an avant-garde split roof and ornate and beautiful wood panel siding and five glass windows across, collapsed onto a blue car following the Loma Prieta earthquake.">
<!-- Also Don't Do This: Too Little Information -->
<img src="Loma_Prieta_Damage.jpg"
alt="A house collapsed onto a carport.">
<!-- Do This: -->
<img src="Loma_Prieta_Damage.jpg"
alt="A wooden house collapsed sideways onto a carport, demonstrating how a lack of shear walls contributed to the failure of the structure.">
Additional Resources
If, like me, you don't do well with the grey area of "there's no one right answer," and you're realizing that alt-text can be a very nuanced and complex topic, fear not! There's a fantastic resource for you to bookmark: An alt Decision Tree. The Web Accessibility Initiative made narrowing down what we need to include as analytical and straightforward as possible with this flowchart. That resource references their in-depth Images Tutorial, where you can explore the topics I introduced here in greater detail and see more examples. I highly recommend checking this out too!
Top comments (0)