Pro Tip: Making images accessible to screen readers doesn’t need to be hard

Images and icons on a website can add to a visitor’s contextual experience. They serve one of three purposes: purely decorative, actionable (ex. magnifying glass on a search field), or to convey information (i.e., a chart demonstrating population growth).

Using alt image tags may seem relatively simple at first glance. However, images can be highly problematic for blind and visually impaired people who often rely on screen reader technologies to audibly playback screen content. When a photo or icon lacks a meaningful alternate text – known as “alt text” – the screen reader may read out “image623.jpg” (or another equally unhelpful file name). Even an alt text like “chart showing U.S. population growth – 2015 to 2019” fails to describe the results of the chart for someone who can not actually see the graphic. Either situation could be frustrating to blind and visually impaired people, but such scenarios are common.

The use of clear, easy to understand alt text is pretty straightforward. Most content management systems provide an alt text field as part of the image placement or editor tool. Images that are purely decorative should be marked with null (empty) alt text (alt=””) in order for them to be ignored by screen readers. However, in cases where images are used to explain information, alt text must go beyond describing what an image is and actually convey its content. For example, a better alt text for a chart image would be “chart showing 5 percent U.S. population growth between 2015 and 2019.”

Using clear, easy to understand alt text will boost your site’s accessibility for screen readers. And alt text – when applied correctly – is also an opportunity to improve your SEO. However, overdoing keywords in alt text can be perceived by search engines as keyword stuffing, not to mention annoying to people using screen readers. If your keywords don’t fit and flow naturally into your alt text, it may be time to re-evaluate your keywords or your chosen images or icons.

Opinions expressed in this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.

About The Author

Carie Fisher

Carie Fisher is a senior accessibility instructor and developer at Deque. She has been building websites professionally since 2005 and is passionate about accessibility and promoting diversity in the tech world. She founded both the A11y Style Guide and the YouTube series Accessibility Talks to help educate others on website accessibility.