5.9 The Basics of Alt Text

Accessibility for the web is a topic I’m passionate about, and a majority of my web design or coding pet peeves negatively impact accessibility. One of the most frustrating things about bad accessibility practices is that a lot of good accessibility practices are actually easy to implement and aren’t all that time consuming. I can think of no better example of that than alternative text or alt text.

As Webaim.org’s 2019 article “Alternative Text” explains, alt text provides “a textual alternative to non-text content in web pages.” This article and this blog post only focuses on alt text images, but it can be applied to forms of media on the web. In the context of images, alt text will appear in place of an image on a web page if the reader has chosen not to view images or the image doesn’t load. But appearing in the place of images isn’t alt text’s only use as this figure from Seobility illustrates.

Alt text is also read by screen readers in place of images. This makes the content and function of the image accessible to people with visual disabilities. Alt text also gives images a description that can be used by search engines, thus improving a website’s SEO.

Returning to WebAIM’s article on alt text, WebAIM emphasizes how alt text doesn’t necessarily always appear in the alt attribute in HTML. Alt text can appear in captions or a corresponding paragraph. That being said, WebAIM argues that context is vital when determining the most appropriate alternative text for an image.

This emphasis on context is one I agree with. If the function and content of an image already appears in a caption, then an alt attribute that repeats what’s in the caption would be redundant and unnecessary. Likewise, if an image only has a decorative function, such as a border or a divider, then an empty alt attribute (alt=””) would suffice.

WebAIM’s article on alt text is an invaluable resource because it provides plenty of examples to help readers get a good grip on alt text and the alt attributive and also provides a lot of tips and advice on alt text and the alt attribute. Did you find the article helpful?

Note: This chapter is a revised version of a blog post titled “The Basics of Alt Text” on Digital Media Miscellany.