Alternative (alt) text

Alt text, also known as alternative text, is text that is used to describe images in digital content. It enables people with certain visual and cognitive disabilities to better understand the context of an image, its content, and the overall purpose of a page as a whole. Did you know that more than 7 million people in the U.S. alone have vision loss, including more than one million Americans who are blind? Alt text is the bridge that makes the web accessible to many of these individuals. When a person who is blind or has low vision uses a website, they will often use a screen reader. A screen reader is a type of software that uses advanced text-to-speech technology to read web pages aloud. Screen readers are designed to detect alt text, even when that alt text is built into the HTML of the site, and thus not visible to visitors who are not using one. In addition, many people with cognitive disabilities may find an abundance of images online distracting, overwhelming, or difficult to process and choose to turn off all images on a site. Alt text enables these users to experience a page without gaps in context. For many web users with disabilities, alt text is essential to accessibility.

Do all images need alt text?

No, not all images need alt text. The rule of thumb is that an image doesn’t need alt text if it is purely decorative. If you add a patterned banner to the top of a blog post, but that banner does not serve a greater purpose beyond aesthetics, leave the alt text field empty, or use anull alt attribute (i.e., alt=””) instead, which indicates to screen readers that the image is purely decorative and should be skipped over.

Examples of decorative images:

• Banners in a website’s header
• Visual stylings like spacers and corners
• Photos or art added purely to add visual interest or aesthetic value to a page
• Images that are already identified or described in the surrounding content on the page.

A good way to decide if an image needs alt text is to turn all of the images off on a webpage, or to view the text by itself in a word processor document. If the text becomes difficult to understand without an image present, or if information is lost, then the missing images need to be given alt text.

How do you write alt text?

To write alt text, it’s important to keep the context of the image in mind. What purpose does this picture, photograph, infographic, or chart serve? That should guide what you add and describe in the accompanying alt text.

Alt text best practices:

• Keep descriptions under 125 characters.
• Only describe what is necessary to help the user understand the image’s purpose on the page.
• Do not include phrases like “an image of” or “a photo of.”
• Do not use the same alt text for multiple images. This is ultimately unhelpful to the reader and can be interpreted as spam by search engines.

Learning to write effective alt text takes time and practice, but the end result is a more accessible, user-friendly website.

What is the difference between alt text and an image description?

Image descriptions typically offer a more detailed insight into an image than alt text does. Alt text is condensed and meant to provide context so that the user does not miss any important or relevant information. Image descriptions, meanwhile, provide more granular details for the use or interpretation of that image.For example, a graph on a business’s finance document may have the alt text “a scatter plot depicting sales vs. advertising spend in 2022. In 2022, greater advertising spend led to greater sales.” This will provide the needed context that the graph is meant to convey. However, the image description, or long description, would go point by point, describing each data point on the graph, so that the user can have a more detailed view of the information.

Is alt text a legal requirement?

In many jurisdictions, alt text is an accessibility conformance and legal compliance requirement. In the United States, legislation like the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act of 1973 both mandate online accessibility. Ensuring that a website is conformant with the Web Content Accessibility Guidelines (WCAG), which include guidelines for where and how to employ alt text.