Skip to main content

A Picture Says More Than a 1000 Words – Unless You're Blind!

Posted on

  • #accessibility
  • #altText
  • #html
  • #images
  • #mistakes
  • #svg
  • #web

Visual content is awesome! Images can convey emotions, capture our imagination, or simply make a website aesthetically more appealing. However, many people can't visually perceive our content. Blind and visually impaired users depend on web developers and content editors to provide alternative text.

Unfortunately, a lot of websites have images with misleading alternative text or no alternative text at all. Imagine you visit a website and instead of all the images you only see blank spaces or fuzzy images. Not great, huh?

A dark room with neon light letters at the back saying 'Nothing to see here'. Photo: © Aleksandar Pasaric / pexels.com

In this article, I'll share some examples of bad alternative text that I regularly encounter in accessibility audits. But first, let's go over the basics.

The Basics of Accessible Images

Typically, we use the img element to display an image on our website. With the alt attribute we can define alternative text for the image. The HTML specification states:

alt — Replacement text for use when images are not available

This means, that the alt text is displayed on the page if the image can't be loaded, e.g because of network errors. Of course, it's even more important for accessibility, as screen readers read the text out to their users so they know what the image means.

Other ways to include images on a website are inline svg elements or the CSS pseudo elements :before and :after. They pose different challenges in regard to accessibility (see the section “Useful Resources” below).

Write Effective Alternative Text

What all image elements have in common is the question: What kind of alternative text is appropriate for the image? This depends on the type of image:

  • Informative images: Images that convey relevant information. The text alternative should convey the meaning or content that is displayed visually.
    • Opinions differ on whether the alt text should consist of a single, short sentence or it should describe the image in more detail with several sentences.
    • In case of complex images (e.g. charts and diagrams), the alternative text should be kept short and refer to a long description that follows the image.
  • Decorative images: Images that don't add relevant information to the content of a page. This is the case for images that are added to make the website more visually attractive. Or images that provide information which is already conveyed using adjacent text. These images should be hidden from assistive technologies, e.g. by setting an empty alternative text (alt="").
  • Functional images: Images used in buttons, links, and other interactive elements. In this case, the alternative text should convey the purpose of the interactive element and not describe the image itself.

My Personal Top 5 of Bad Alternative Text

When evaluating the accessibility of websites, I regularly encounter the same alt text mistakes over and over. So here's my personal list of shitty alt text examples:

  1. Title on repeat: Article previews (e.g. in a news carousel) usually include a thumbnail image to illustrate the article. A lot of times, the image's alt text simply repeats the article's title instead of describing the image. This means redundant information and a waste of time for screen reader users. Please, take the time to describe what the image actually shows!
  2. Did the photographer take a selfie? I often encounter photos with alt text that includes the copyright information. Did the photographer take a selfie and can be seen in the picture? No? Then leave their name out of the alt text! You can put the copyright in the visible caption of the photo.
  3. What does it do? Another common mistake is descriptive alt text for functional images. Imagine an icon button that visually displays a downward arrow. The button allows you to download a document. But the alt text says "arrow down". Not the best way to convey the button's purpose.
  4. I'm not even here: Take a div element and slap an image on it using the background-image CSS property. Et voilà! You can see the image. But there is no information for assistive technologies. Screen reader users won't even notice that the image is there. Or even worse, they'll arrive at an image link or icon button with no information about their purpose. Thanks for nothing!
  5. That's just lazy: Sad, but true. I still encounter img tags with no defined alt attribute. Just no description at all. As a fallback, screen readers announce the image's file name instead. Not very helpful, when the image is described as "wdkmm12xpY5.png".

Conclusion

When you include visual content on a page, take a second to answer the following questions: What is the purpose of the image? Is it purely decorative? If not, define meaningful alternative text that describes the image or the purpose of the link or button.

Useful Resources

Posted on

HomepageTop