Detailed best practices for alt text

General Guidance: Alternative Text

Introduction

Alternative text in accessibility is the requirement meant to help deliver the content in images as a machine-readable structure. Images that convey information, such as images in articles, images of text, images of data charts, and maps need to have alternative text made available to people who are blind or rely on assistive technologies.

This document explains in depth alternative text and general best practices for using alternative text following the federal accessibility standards for Information and Communication Technologies (ICTs) commonly known as Section 508 Standards. The document outlines considerations from WCAG 2.0 and scenarios for different strategies.

The content in this document is not all encompassing and does not constitute legal advice when it comes to compliance with Section 508. For further information, please refer to:

1. W3C accessibility guidelines, which explains the reasons behind each guideline.
2. W3C accessibility techniques, which explains how to implement each guideline.
3. U.S. Federal Government Section 508 accessibility guidelines.

You may also reach out to your regional ADA National Network for further assistance.

Background

Section 508 of the Rehabilitation Act is a law that requires federal agencies to develop, procure, maintain and use information and communications technology (ICT) that consider the needs of individuals, members of the general public or federal personnel, who experience a wide-range of barriers to access.

The US Access Board, an independent federal agency supporting greater access for all, established the Section 508 Standards (2017) as a way of providing a set of actionable requirements for a wide-range of ICT technologies such as online training videos or portals, websites, social media, and online word documents and pdfs. The Section 508 Standards were updated in 2017 to incorporate the Web Content Accessibility Guidelines (WCAG) 2.0 to support the successful implementation of the law by providing clearer guidance and testable metrics to remove cognitive, visual and physical access barriers.

The Web Content Accessibility Guidelines (WCAG) were developed by the World Wide Web Consortium as a series of guides and testable statements (also known as success criterias) for making web content accessible.

The Web Content Accessibility Guidelines have been updated from 2.0 to 2.1 since the updated Section 508 Standards (2017) went into effect in March 2018. The WCAG 2.1 updates did not change the meaning of the existing criteria under 2.0 and serve to provide further strategies to achieve compliance. Compliance with Section 508 is possible by following the success criteria under WCAG 2.1.

Alternative Text

Alternative text is a set of strategies to successfully make information in images accessible to people who are blind and/or use assistive technologies in a comparable manner to the access experienced by those who are not blind or do not rely on assistive technologies.

Section 508 requires that information and communication technologies be made accessible to those who have disabilities in a comparable manner to the access experienced by those without disabilities. The goal is to eliminate barriers to information and communication technologies, provide equal opportunities and help prepare organizations for an aging workforce population. To aid in the process of meeting the equity goals, Section 508 includes a list of Standards or actionable requirements people working with information and communication technologies need to follow in order to make content accessible.

The actionable requirements hinge on the idea that information and communication technologies need to develop and deliver in machine-readable structures that can be outputted in multiple ways depending on a person's need: visual, aural, etc.

Alternative text allows people who are blind and/or use assistive technology to experience images by having the image conveyed in whatever form best meets their need: as audio from a screen reader, feel via a braille keyboard, etc. If no alternative text is provided, then people who are blind and/or rely on assistive technology cannot access the content of an image. The screen reader will announce the name of the image or simply state “IMAGE”  instead, which can lead to confusion and frustration for those relying on assistive technologies. Thus failing to meet the requirement of providing content in a comparable way.

Unlike when it comes across an image that is missing the alt attribute. The screen reader will read the name of the image instead which can lead to confusion and frustration for those relying on assistive technologies.

The term alternative text should not be confused with “alt text” or the HTML markup alt attribute alt=” “. The term “Alternative text” refers to:

• Text that, through alt attribute (alt=””), is programmatically associated to a figure. Allows a person using assistive technologies to relate the text to the image then draw information.
• Text around an image (above it, next to it, below it) that provides a visual description of elements in an image or of images of text. Allows a person using assistive technologies to enjoy the information in a seamless way.
• A link to an html-only text page that provides a person the possibility to dig deeper into long descriptions or data in whatever form best meets their need.

Thus, it’s important to stress that Alternative text is a combination of html markup and good writing. Also important to note that all images need an alt attribute. What you provide as text between quotation marks (“ “) in the alt attribute alt = “ “ may vary. The text depends on the content of the image and context the image is in.

Best Practices

General Guidelines

• All images need an alt attribute (alt = " ")
  • What goes inside the alt attribute, between the quotation marks (" "),  is what varies case by case.
• Only images as content need alternative text
  • Don’t provide alternative text for a decorative image such as a line or a flourish.
  • Leave the alt text markup null (empty) for decorative images
• Be succinct
  • Typically no more than a few words should be used and try to use 100 characters at most.
  • If a few words won’t do, then resort to the guidelines for Complex Images.
• Be accurate and equivalent
  • Provide a description of the image in order to present the content.
  • Evaluate what the person choosing the image was trying to achieve by sharing it.
  • Include text that is part of the image
• Do not be redundant:
  • Don't provide the same information as text that is surrounding the image.
  • Never start with “Image of…”, “Photo of…” or “Logo of"
  • If the fact that an image is an illustration or a photograph, as in the case of talking about the work of an artist, then it may be useful to include that fact in the alternative text.

Guidance on how to determine text in the alt attribute

Determining the appropriate alternative text strategy for an image depends on whether the image presents content and if the image has a function. Then the next important step is to determine the type of content and what information surrounds the image. When determining the appropriate alternative text strategy, ask yourself:

• Is the image solely decorating a page? Or are people who do not rely on assistive technology getting more information by having access to the image?
• Is the image a link and clickable? Does the image have a function?
• Is the image illustrating something like a chart or diagram? Will the description in the alt attribute (alt=” “) prove to be too long?
• What information is in the body of text next to the image? Below the image?
• What relevant information is the person missing by not seeing this image? Is the image conveying information that is not available in the surrounding body of text? Is the information in the image only partly conveyed in the surrounding text?

Is the image solely decorating a page?

All images are considered content unless they are decorative images. Decorative images are those that don’t convey any meaning usually consisting of lines or texture elements on a page.

1. Is the image a line divider or texture element which does not add any meaning to the rest of the content of the page?
   • If YES, then the image needs a null alt attribute (alt=””)
   • If NO, then the image needs an alt attribute with text between the quotation marks (“ “).
   • If the image feels decorative, yet was curated or chosen, then the image needs an alt attribute with text between the quotation marks (“ “).

Decorative images need a null alt text (alt=””) so that the image can be ignored by assistive technologies. For example, a screen reader will completely skip over an image and won’t announce it’s presence when it comes across a null (alt=””) alt text.

Note: Images in an article may be used to help visually style a page. Editorial decisions and curation went into the process of selecting the image displayed next to a body of text. People have the right to experience the editorial choice made by those selecting the image, even when unsighted. Remember: the goal of Section 508 is to increase access and equity by giving those who rely on assistive technologies content in a comparable manner.

Is the image a link and clickable?

Images are often used to provide content and important functions, such as navigation or buttons. First decide if the image presents content and if the image has a function. If you determine the image has a function, then look to see if there is adjacent text. Keep in mind that adjacent text within a link is expressed in HTML markup in the following way <a href="link"><img src="jpg">text</a>

1. Is the image a link and clickable?
   • If YES, then the image has a function.
   • If the image is a link and does not have adjacent text within the link then an empty or null alt attribute (alt= ““) would never be appropriate.
   • If the image is a link and has adjacent text within the link then an empty alt attribute (alt= ““) is appropriate.

Figure 1.1 Image is a link. A user is able to click on the image in a window and view it in greater detail. The image has alternative text provided immediately below, yet the text itself is not a link. The alt attribute cannot be empty.

Is the image illustrating something like a chart or diagram? Complex Images

Sometimes it feels impossible to be succinct due to the content of the image. Complex images are those that contain substantial information hard to convey in a short sentence, such as graphs, charts, diagrams, illustrations with text and maps.

1. Is the image a graph, chart, illustration with text or a map?

• If YES, then the image is considered a complex image.
• If NO, then provide a succinct alternative text using the guidance provided under the question What information is in the body of text next to the image?

Complex images need a two-part alternative text. First, a short description in the alt attribute to identify the image and where to find a longer, more complete description. Second, the long description itself using markup such as LONGDESC attributes or inline descriptions that explain the significance of each image to people who use assistive technologies.

• Provide a link next to the image. The text link refers to a separate web page or section of the same web page that contains the long description. The link text needs to clearly state the destination and how it’s associated with the image since it won’t be structurally associated using HTML markup.
  • <img src=”jpg” alt=”text description”><a href=”link to long description destination”>text that states the link directs users to a description of the chart or map</a>
• Provide text in the alt attribute that describes the location of the long description for the chart. This technique is most commonly used when directing people to a section of the same web page.
  • <img src=”jpg” alt”very short description and destination of the long description in the same page”>
• Use the figure attribute <figure> <figcaption> to explicitly associate the image to a long description. This technique is most commonly used when the long description requires multiple titles, greater styling of the description and tabular data.
  • <figure role “group”> <img sr=”jpg” alt=”text description><figcaption>long description</figcaption></figure>
• Use the attribute longdesc. This technique is most commonly used when the destination is on the same page. Requires creating divs and is less recognized across all web page browsers.
  • <img src= “jpg” alt= “text description” longdesc=”#destination div">...<div id=”destination div”> description </div>
• Use the aria-describedby attribute. This technique is most commonly used when the destination is on the same page.
  • <img src=”jpg” alt=”text description” aria-describedby =”nameid”>...<p id=”nameid”>long description</p>

For more details please visit the link to W3C’s guidance on Complex Images

What information is in the body of text next to the image? Below the image?

The meaning of an image within the context of the overall page is an important consideration when writing a descriptive alternative text. The alternative text for an image needs to be evaluated on a page-by-page use. Alternative text needs to be written to consider how an image is being used in each page.

1. Is all of the image’s content present within the surrounding text?
   • If the content of the image is present within the text paragraph above or below it, then alt =” “ (an empty or null alt attribute) may be sufficient.
   • If the content of the image is not immediately surrounding it, then the alt attribute should not be empty.
     1. Provide a few words.
     2. Ensure the meaning of the image is shared.
     3. If the content of the image can’t be explained in a succinct manner then rely on the guidance for complex images.

There are scenarios where an image is uploaded to a Content Management System (CMS) and used in multiple places. While not endorsed, the best suggestion available is to:

• Provide a basic description of the content in the image in the Content Management System
• Provide further information that accounts for the context in which the image is being used via the <figcaption> html attribute after the image element on the page.
• Follow the guidance to define what an image means within the content of the overall page.

The chart below portrays a simplified decision tree to help you remember the main questions and what  alternative text would work best for different scenarios.