Where are alt tags used and why are they important?

Summary

The alt tag is an attribute within an image tag that describes the purpose of an image. It is important because it enables screen reader users and others with accessibility needs to understand images, while also improving SEO when used correctly.

Overview

Almost everyone who has even a basic level of involvement with accessibility has been told that they must use alt tags on all images. The alt tag is not really a tag; it is an attribute within an image tag. Why is the use of these attributes so important?

Who Is Affected

Users who are blind or visually impaired

Users who are blind or visually impaired need alt tags on images. Users who cannot see the screen and depend on a screen reader will have no way of comprehending an image on the page. Without an alt tag, the screen reader will read the source code and the user who is blind will most likely hear something such as “graphic 42368” or the filename of the image, such as “graphic htrn.png”. The alt tag describes the image or at least states what the image is trying to convey to the person seeing the page. In addition, users of screen magnification may not be able to get a complete view of the image and thus need the alt tag to let them know what the purpose of the image is.

Users with cognitive impairments

Some individuals with certain types of cognitive issues cannot understand the purpose of an image on a web page. They can hover the mouse over an image and see the alt tag, and the alt tag can convey to them the purpose of the image and thus greatly enhance their web experience.

SEO impact

It's worth noting that search engine optimization (SEO)  is also improved when images are tagged correctly.

Some Considerations

Describe purpose, not just appearance

Remember that alt tags need to convey the purpose of the image and not necessarily a word-for-word description. So do your best to give essential elements of description while conveying why the image is present.

Keep alt text concise

Keep it brief. If your alt tag needs to be lengthy in order to convey the information the user needs to understand, consider using a long description (longdesc) or giving a detailed description of the image in the text of the page.

Use null alt text for decorative images

If the image is purely decorative and serves no informational purpose, use a null alt tag <alt="">. Screen readers ignore these null alt tags and the screen reader user will never even know these decorative images exist.

When to use vs. when not to use alt text

When to use alt text

• The alt tag describes the image or at least states what the image is trying to convey to the person seeing the page.
• The alt tag can convey to them the purpose of the image and thus greatly enhance their web experience.
• Users who are blind or visually impaired need alt tags on images.

When not to use alt text (null alt)

• If the image is purely decorative and serves no informational purpose, use a null alt tag .
• Screen readers ignore these null alt tags and the screen reader user will never even know these decorative images exist.

Additional resources:

• Accessibility: Image alt text best practices