​Last week I covered how to write better Page Titles for meeting accessibility standards, and this week I cover the second topic in the W3C’s Easy Checks, image text alternatives. At first glance, this seems an easy requirement, but many content authors don’t grasp the full intent or purpose of this accessibility standard.

Alt text should describe the meaning of an image

Alt text is meant to provide vision-impaired users with the same conceptual understanding of the page content as someone who can see. It should convey the meaning and purpose of the image to the user rather than a literal description of the image itself.

There is no technical, rote way to provide meaningful alt text. For example, mechanically inserting file names (i.e., convention-hall.png) in the alt attribute fails to meet accessibility requirements because it does not provide the user with useful information, which is the intent of this requirement.

In that same vein, simply adding “Convention hall” as the alt text is no more meaningful than the file name and also fails to meet accessibility requirements.

Not all images need alt text

Empty alt attributes in an image will trigger a warning from automated accessibility checkers, which has led many people to erroneously believe that text must be present for every image to meet accessibility requirements and for a page to be compliant. Instead, the warning is meant to indicate that only human judgment can decide whether an empty attribute is appropriate, so the image context should be reviewed.

Decorative images that do not contain any substantive information should have empty alt attributes so that readers are not slowed down with irrelevant verbiage.​ 

Alt text requires editorial judgment

Alt text should be written with the same thoughtful approach as page content. Only an author/editor can correctly judge whether an image is decorative or not. A stock photo of a convention hall filled with attendees would probably be considered decorative, but a specific photo of a convention might have more meaning in the context of an article about that event. In that case, the alt text could read: “Our recent convention was well-attended and there was standing-room only by the end of the day.”

If this same message is already conveyed in the page text, then the image is decorative only and the alt attribute can be left empty.

Image captions can take the place of alt text

Sometimes the alt text of an image may end up with more substantive content than the surrounding page text. If sighted users will get less information due to the invisibility of alt text, then the content author should consider elevating the image description to a caption where the meaning is explicit to all users, rather than any particular subset of users. With the meaning defined in the surrounding text, once again the image is purely decorative and the alt attribute can be left empty.

Images can initiate action

When images are used to indicate an action, the alternative text should describe the action, not the image itself. Screen readers will identify buttons or links, so the alt text does not need to include that information. “Register for the convention” or “Submit your form” are appropriate descriptions for an action-related image.

Images can contain text

Images of text should be avoided for accessibility compliance, but there are times when an image, such as a logo, is appropriate even though it contains text as well. The meaning of that text should be part of the alt attribute text. For example, a school logo could be described in this way: “Participate and Persist is our school motto and is incorporated into our school logo.”

Images can convey complex information

Images of graphs and charts may contain complex information that is not easily conveyed in an alt attribute. If the surrounding text sufficiently describes the meaning of the image, the text can read “Chart of rising temperatures as discussed below.” If the text does not provide this information, then a long description should be provided elsewhere, such as in a data table.

Image sprites can’t convey unique information

An image sprite is a collection of images put into a single image file then positioned on the web page using CSS. This design approach can reduce performance load and speed up page download time. Used judiciously, sprites can aid accessibility compliance, but inappropriate choices can result in compliance failure.

Sprites used purely for decorative purposes do not need an alt attribute. However, if visual information is included in a sprite, the lack of a unique alt text for that instance will result in lost meaning and accessibility failure. For example, the image of a warning sign next to a text block conveys the critical nature of that text. The meaning may be “Failure to read this text will result in software malfunction.” If that meaning can’t be conveyed through alt text, then it should be explicitly included as part of the page text (even if it is hidden from sighted users through CSS).

Web Content Accessibility Guidelines 2.0

For more background on the specific accessibility guidelines being addressed by these tips, review this section:

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)​