Posted by Aimee Cozza on May 2nd, 2019

When it comes to web accessibility, we may have new features such as Google’s ability to discern animals, shapes, and otherwise from images themselves, but much of a search engine’s ability to “see” images isn’t rooted in deep dream technology. Crawlers use a lot of contextual items to discern what your image is about and where it fits, and the big part of this is a simple HTML tag called alternative text.

What is alternative text?

Alternative text is simply a piece of text that describes an image, link, or other piece of content. It can give web crawlers much needed information about your image. Since a machine cannot “see” your image, it relies upon information gathered in the title, alternative text, and where/what kind of page it’s on to decide what it is and what kinds of keywords will make the image show as a result when someone searches for it.

Alternative text is also incredibly important for individuals who use screen reader technology, since they cannot see the image visually. Alt text helps inform users who may be visually impaired as to what is on the page, especially if the image is important to the context of the page.

In HTML, alt text simply looks like this:

alt=”Some image description goes here”

Alt text can also be used to help inform web crawlers and screen readers about links and where they go.

Users who are not visually impaired may also see the alt text upon mouse hover, or if the image ever becomes a broken image.

How do I develop good alt text?

Writing poorly written alt text, such as simply copying a title in the alt text field, can be just as bad as not supplying alt text at all.

One of the easiest ways to remember is “describe your image in text like you were describing it to a blind person”. Here’s an example:

This image, titled “Meadow”, is a photo of a meadow. However, instead of just marking the alt text as “meadow”, we can instead write:

A landscape portrait of a lush green meadow with small white flowers dotting the green grassy area. A tree’s trunk is visible to the right. The sun is shining bright in the upper left.

If there is text on your image, or your image is of text, you will want to make sure you transcribe that text as well.

Some things to do:

• Be accurate in your description. Try not to describe things that do not occur in the image.
• Be as terse as possible. You can write as much alt text as you want, but a few words or a sentence should suffice.
• Don’t start your alt text with “image of” or “graphic of”. It is likely that the crawler or screen reader will already know it’s an image to begin with given its HTML markup.
• If the image is a link, always load alt text.

When do I not need alt text?

If an image is purely decorative and supplies no information to your website at all, you would not need to load alt text. If the context and information contained within the image is conveyed sufficiently in the body of the page, you do not need to load alt text. Still, if you do not plan on loading alt text, simply leave a blank alt attribute tag (alt=””).

For a more complete overview of alt text, the alt attribute, and more, visit WebAIM’s website.