Why you Should use Alt Tags for Accessibility (Instead of SEO)

Accessibility can be a controversial subject. Proper accessibility habits sometimes conflict with established (or at least common) practices in other aspects of the web development industry. Nowhere is this more true that with the alt attribute and SEO.

More commonly referred to as an “alt tag.” The alt attribute on images are a popular target for additional SEO optimization. It makes sense – search engines crawl alt tags when they are present. But more often than not, your images shouldn’t even have an alt attribute at all.

Images as Progressive Enhancement

The WCAG 2.0 Guidelines are clear on whether or not an image should have a non-text alternative. Non-text content (images, video, audio, etc.) should have an alt attribute or “text alternative that serves the equivalent purpose.” You may think that settles the debate and that all images should have an alt tag where we can add in some SEO terms. It’s not quite that simple. The WCAG guidelines provide a specific exception for decorative images:

The WCAG guidelines provide a specific exception for decorative images:

“If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.”

The tricky part is defining “pure decoration” because we’re venturing into opinion territory. In this writer’s opinion, nearly every image you add to web content is for decoration. Even graphs and charts should be described by their accompanying text instead of an alt tag. Images are a progressive enhancement for the text-based medium that is the web.

HTML as a language was written to be forward-compatible, meaning the original text-based browsers will still be able to process modern HTML5 pages. Those browsers just ignore elements they don’t understand, including images. Since HTML is the true language of the web, keep that in mind when creating content for it.

We could, and I expect we will, debate the idea of images as progressive enhancement for days. But once you accept the concept, you need to answer the alt tag question. What should your decorative images have as their alt attribute?

The Empty Alt

For the longest time, I defaulted to just not including an alt tag on my images. While this does the job of not having a text alternative for something that doesn’t need it, it doesn’t signal to screen readers and other assistive technologies that the image can be safely skipped over. For this you need a blank alt attribute.

The blank attribute should be implemented like so:

The empty alt tag is important here. When assistive technologies come across it, they know to skip over the image completely. They treat it as if it doesn’t exist instead of announcing an image that lacks a description. This leaves the user blissfully unaware of the image instead of being left to wonder how to describe it.

What About SEO?

SEO experts are likely shaking their heads by now, and that’s okay. alt attributes are one of the instances where SEO and accessibility disagree. It’s important to realize the purpose of the alt tag is very specific. It exists to provide a text alternative for the image in question. The alt attribute itself is an assistive technology; it does not exist to improve your SEO.

There are other ways to improve your image SEO, including naming your image files in ways that help their ability to be found and indexed. I’m not an SEO expert, so I won’t pretend I know them all. What I can tell you is you are making your site less accessible by including alt tags where they aren’t needed.

Wrapping it Up

The concept is simple, but it may take a while to get used to. Just remember, when writing your content, even with SEO in mind, describe your images in your actual content. Use the images as an enhancement to your text, not a requirement. Your SEO information and keywords belong in your content, not your image metadata. This way, having an empty alt attribute won’t seem so weird.