Alt Text | Screen Readers, Decorative Images, and AI

Overview

Images keep content engaging.

A hero image sets the tone for an article, a product thumbnail sells faster than a description ever could.

A picture really is worth a thousand words. But for vision-impaired users relying on a screen reader, that picture is worth nothing without alt text. A thumbnail of the latest pair of Levi's is just silence.

Understanding Images and Screen Readers

Without an alt attribute

Before covering the specifics of alt text and varying implementations, I think it’s important to understand what happens when a screen reader encounters an image without any alt attribute.

<img src="/assets/IMG_9832.jpg" />

It’s an easy mistake to make, and one that’s often overlooked. However, the absence of an alt attribute is one of the worst things you can do for a screen reader.

Alt is a required attribute in HTML spec. Though many omit it, it is not semantically correct, and it will not pass an HTML validator.

Worse yet, screen readers will try to interpret, and announce, whatever other information they can find about the image if the alt attribute is not present.

This could result in a screen reader reading out: image dimensions (width 200, height 300), file paths or names (/assets/IMG_9832.jpg), etc. All things that really aren’t valuable in conveying what the image means.

Decorative Images

Now that we’ve established that the alt attribute is a required attribute for images, we can talk about when it makes sense to leave that attribute blank.

For images that are considered decorative, meaning that they add no additional context to the page or are strictly used for illustration purposes, you can leave the alt attribute blank. An example of this may include a series of snowmen or snow flakes on a website to book ice skates.

If you’re still unsure if an image is decorative you can follow this simple test: if you removed the image entirely, would the user miss any meaningful information? If not, it's decorative.

Worth noting: even with a blank alt attribute, some screen readers will still announce the image as “graphic”, “image”, or “empty text”. If you want it removed from a screen reader's view entirely, pairing alt="" with aria-hidden="true" and role="none" is the safest combination for consistent screen reader behavior.

What makes good alt text

There are a handful of approaches to writing alt text, and all depend on the context of the image.

If the imagery is meant to evoke emotion, that should come through in your alt text. Your alt text should match the tone, mood, and emotion of the surrounding content, paired with vivid, sensory language.

For instance, if you are on a dog boarding website, and you have an image of dogs playing in the facility’s yard “dogs playing in grass” might not hit the right mark. Something like “A golden retriever plays tug of war with a cocker spaniel amongst purple clovers in the yard.” gives the user more to go off, and adds to their decision making about whether or not they should board their dog at your business.

If you are browsing an ecommerce clothing retailer looking at pants, “blue jeans” leaves a lot to be desired. Adding relevant information such as the brand, gender, fit, and the actual colour - not just its closest primary - goes a long way. “Men’s 501 Levi's Athletic Fit in light stonewash blue” makes the product much clearer and easier to buy than “blue jeans” ever could.

If you are sharing images of graphs or charts, you should aim to summarize the information rather than describe the graphic. “Bar chart of monthly sales figures” tells a user next to nothing. “Sales started increasing drastically in Q4, peaking in December at $120k, nearly double the yearly average.” is much more informative without being over-bearing. If you feel a longer summary is needed, you could always pair the image (and its alt text) within a <figure> element with an associated <caption> tag.

Lastly, some other general rules of thumb for alt text:

• Use plain language
• Keep alt text within 250 characters
• Don't start alt text with “Image of” (a screen reader will already announce that the content is an image)
• If the alt text is written as a sentence, end it with punctuation

Reading images with AI: Who needs alt text anyways?

AI tools are constantly getting better at interpreting and highlighting what we want to see. The same is true with AI in the screen reader space.

Recently, Apple released their latest Apple Intelligence updates. With it, come updates to how VoiceOver deals with images, like the ability to infer what an image is about and read that out to the user if alt text is missing.

Other competitors to Apple have similar features, and the ones that don’t yet aren't far behind in launching them.

This raises the question: If AI can infer what an image is about and read it out to me, why do I need to bother with alt text at all?

Personally, I think it comes down to control over your own voice. As I stated earlier in the article, alt text should match the tone and emotion of the surrounding content. Writers have a voice. Brands have a voice. And that voice should carry through in their alt text as well.

Having AI summarize an image is a wonderful capability, but it may miss things that you deem important for the user.

Let’s imagine an image found on a travel booking website featuring a couple eating at an outdoor table surrounded by beautiful architecture and scenery. AI could certainly describe that scene, but it may not highlight the details you deem the most important. The mood of the guests, the atmosphere, the surrounding landmarks, the city itself. All aspects you can lean in to deliberately, adding to the voice of your product.

Sure, AI is a great fallback, and is certainly better than alt text done poorly, such as just using a filename (IMG_9832.jpg). However, it should be considered a tool filling a gap when one exists, not an excuse to leave the gap open in the first place.

Wrap up

Writing alt text isn't just about describing an image. It's about preserving your product's or brand's voice for every user.

AI will fill the gap when you leave one, but it may not fill it in a way that satisfies what you would wish to convey.

An extra thirty seconds here. An extra minute there. That's all it takes to ensure your voice and intent are preserved in the parts of your product that can't speak for themselves.