Beyond the Visual: Crafting Meaningful Alternative Text

Consider Your Audience

Users who are unable to see images and other graphical objects depend on an alternative way to understand the purpose or meaning conveyed by them. The alternative must exist in text and be associated to the image or object in the code. This enables assistive technologies like screen readers to communicate the type of object (image, icon, figure, button, etc.) along with its description.

Alt Text and Accessible Name

The common understanding of text alternatives centers on the use of “alt text” on images via the “alt” attribute of the <img> tag. For example:

<img alt="Navigate to home page" src="/assets/svg/crownpeak-logo.svg">

A broader perspective on the topic is known as “ Accessible Name ,” which seeks to place emphasis on the need for an accessible name on all objects, not just images, and includes the use of ARIA attributes, such as aria-label or aria-labelledby, as the alt attribute is not universally available.

The best practice for accessible name/alternative text specifies that the text should be succinct, just enough to communicate the idea without burdening the user with unnecessary detail. The assumption has been that since blind people cannot see images, they do not want to be bothered by them, unless they contain information that is not available anywhere in the text, or conveys compelling information that adds to the purpose of the text. In effect, this sounds like the vast majority of images should be marked as decorative. However, this is not the trend.

The Case for More Versus Less Alternative Text

Modern technology has become highly visual and often graphics are employed to reiterate the meaning conveyed by the text. This can be especially impactful in the following scenarios:

• Marketing - Branding and name recognition can be reinforced by repetition in the alternative text.
• Education - Hearing the concept a second or even third time, maybe said in a slightly different way, is a well-established learning pattern.
• Diversity and Inclusion - Demonstrating a commitment to these concepts is often handled in a subtle manner. It might be important to convey inclusion via images even when that is not the purpose of the text.

In addition, screen readers are no longer the sole domain of the legally blind. People with low vision, cognitive disorders, motor disabilities and other physical limitations -- and even new language learners -- are benefiting from screen reader support these days. In these cases it might be frustrating for users to see, even partially, a graphic but not hear an accessible name read for it, especially if they are using keyboard shortcuts like pressing the “G” key to skim the page, going from graphic to graphic.

Of course this would not apply to all sites or applications, but it would certainly be a better experience to hear descriptive text read rather than the full path and filename of the image, which is what occurs when the accessible name is missing AND it has not been marked as decorative. In other words, when no consideration has been given for accessibility.

Blindness Exists on a Spectrum

Another factor to consider when determining whether images should be marked as decorative or not, is the difference between people who are blind from birth compared to those who experienced blindness later in life. People who have had sight some or much of their lives are able to apply contextual information that people blind from birth cannot. For example people blind from birth have trouble conceiving of how or why objects look smaller when seen from a distance.

Blind people who are able to apply context from personal experience might really enjoy hearing the aesthetic details of an image of a beautiful scene, even though the purpose of the image does not convey information that is important for understanding the purpose of the text or that is not already available in text.

Consider the aging population. As people who previously had sight live longer with blindness, they are going to expect a richer experience from the content that is presented to them via screen readers, especially when they are able to apply loads of context in their "minds' eye" from personal experience.

The Dilemma for Testers

Accessibility testers are instructed to use the following criteria in determining if an image is decorative or not:

If you were to remove the image from the page, no important information would be lost.

The operative word is “important.” And so the question begs, “Important to whom?”

Clearly, there are aspects of WCAG 1.1.1 Non-text Content that are open for interpretation and must be assessed on a case by case basis when evaluating the purpose of images. Content creators should consider who their audience is predominately and, above all, be consistent.

W3C Image Definitions

Luckily, other aspects of non-text content covered by 1.1.1 are more straightforward. The W3C provides the following direction for determining where and how alternative text should be applied for all image types:

• Informative images
  Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
• Decorative images
  Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
• Functional images
  The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
• Images of text
  Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
• Complex images*
  For example, graphs and diagrams. To convey data or detailed information, provide a complete text equivalent of the data or information provided in the image as the text alternative.
• Groups of images
  If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
• Image maps
  The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

*More Information on Complex Images

Complex images such as graphs, charts, or diagrams, may contain too much information to be effectively described using alternative text methods, such as the alt attribute or aria-label. Instead, detailed descriptions of these images should be provided elsewhere (e.g., on the same page or on a separate page).

This might include text that describes the highlights of the image, or it might include structured data organized using headings, lists, and tables that users can explore. This might be helpful for all users, not just users who are unable to see the image. Keep this in mind as you decide where to place the image description.

The National Center for Accessible Media (NCAM) has developed guidelines for describing complex images, plus a variety of examples. These are available in their Effective Practices for Describing STEM Images . Another excellent resource, with additional examples, is Describing Figures , a guide from the ACM Special Interest Group on Accessible Computing (SIGACCESS).

The WebAIM Screen Reader User Survey Results provides a good example of data presented in a variety of ways (graphs, tables, and text descriptions). This is an example of universal design, communicating ideas using multiple means since humans are highly diverse in how they process complex information.