Accessible Images & Alternative Text

Images on a website, document, or other electronic media can be helpful by adding visual information or enhancing the aesthetics with decorative impact. However, for users that are not able to see images adequately, we need to use "alternative text" that can convey this information, especially when it is important to the context of the content. 

What is Alternative Text?

Alternative text, often called "alt text," is a text description used for non-text elements, such as images, to convey the same information to users who may not be able to see the visual content. This ensures that everyone, including people using screen readers, understands the purpose of the image. Alt text is primarily used for meaningful images, while purely decorative images typically don't need alt text.

Alt Text Functions

  • Alt text is read by screen readers, making the content and function of an image accessible to users with visual or cognitive disabilities.
  • It is displayed in place of the image if the image file doesn't’t load in a browser.
  • Alt text provides a semantic description of images that can be understood by search engines, improving SEO.

Alt text should be concise, clearly conveying the important information in the image. In most cases, it should be 140 characters or less.

How Do We Present Alternative Text?

  • Within the 'alt' attribute of the 'img' element.
  • Within the context or surroundings of the image.
  • Every image must have an 'alt' attribute.
  • Images may be given an empty or null alt attribute

Using Alt Text for Images

Any image that conveys content or functionality on a webpage should have appropriate alt text. Determining the right alt text often depends on the context and may involve some interpretation.

  • For simple images like logos or photographs, the alt text should be a brief description of the image's content.
  • Images that are purely decorative and don’t convey information don’t need descriptive alt text. In these cases, best practices recommend leaving the alt text field empty ("") to signal screen readers to skip the image.
  • When an image contains text, it’s best to use actual text rather than embedding text in the image. If this isn’t possible, the alt text should include the text that appears in the image.
  • If an image conveys too much information for concise alt text, it's considered a complex image, and alternative strategies (like a detailed description elsewhere on the page) may be needed.

Complex Images

If you are considering placing images of charts, diagrams, infographics, or heavy use of graphically conveyed text on your website, we ask for a detailed description of the information shown by the image. This description will be provided elsewhere (e.g., on the same page or on a separate page).

We ask that when requesting a use of a complex image, that there is:

  • A text version in a Word document of all of the information conveyed in the graphic
  • A high-quality file of your graphic and the document with the text version via ServiceNow ticket

Examples of When to Use Alternative Text

There are lots of examples of how to provide provide the best alternative text option(s) for images. Below are some great examples to help you determine the best alternative text for your web images.

Web Content Accessibility Guidelines (WCAG)