Alternative text

Alternative text (sometimes incorrectly called ‘alt tags’) is text intended to describe something – typically images, audio and video – for those who can only read text. Typically this includes:

• Users with visual impairment, who have their webpages read out aloud to them by a screen reader
• Search engines like Google

In particular, because search engines can’t understand images, audio and video like humans can, they are unable to index or find content hidden inside without ‘alternative’ text to look at. Including alternative text therefore is good SEO practice and essential for accessibility.

How it is coded

Best practice

Whenever images, audio and video are used on the web, consider whether that content is important to the understanding of the page, or purely decorative.

For example, a small icon which appears next to a menu link, and which provides no additional useful information by itself, would be considered decorative. In these cases, the alternative text should be explicitly set to empty (sometimes called “null alt text”) with this code: <img alt="">, which tells screen readers not to mention it.

Where the media is not decorative, you should provide appropriate alternative text. Consider the following image:

An image such as this should have alternative text like “Two apples, one sliced in half”.

Alternative text is not required to explain every instance of media in exact detail. From Wikipedia:

The alt attribute does not always have to literally describe the contents of the image. Keep in mind the purpose and context of the image and what would be useful to someone who cannot see it. The alt attribute is supposed to be an alternative for the image, usually stating its purpose. For example, an image of a warning sign should not have alt text “a triangle with a yellow background, black border and an exclamation mark”, but simply “Warning!”—unless, of course, the alt text’s purpose is to show what the warning symbol actually looks like.

It is never acceptable to omit the alt attribute. When this happens, many screen readers will speak out the filename for the image instead, resulting in a terrible experience for users.

Further reading

• Alt attribute on Wikipedia