Overview of Text Alternatives

Purpose

If someone is blind and cannot see the computer screen, then they will need a screen reader to announce the purpose of visual, non-text content such as images. Screen readers can accomplish this if text alternatives are provided in the website code. A text alternative concisely and sufficiently describes a specific piece of visual content.

If an image does not provide a text alternative, then screen readers may announce the filename of the image instead. This is not sufficient and can often be confusing, especially if the filename is long and alphanumeric.

Screen Reader Announces: PictureB32524

Would you understand the meaning of an image described like that?

Images that do not convey information are defined as decorative, and should be expressed as such to screen readers so that they can be safely ignored. Decorative images should never provide a visual descriptions.

How to Test

Best Practices

Context Sensitive

Text alternatives should always be created for the context in which they will be used. A single images can be used on a wide variety of ways, therefore text alternatives should never be set once and just copied.

Let’s take an example Flag of the United States

  • On Wikipedia United States page the text alternative “Flag of the United States” is used just as it used on this page.
  • On emojipedia US Flag: United States page multiple versions of the US Flag are shown so it’s appropriate to describe their unique visual differences.
  • If used as part of a Irving Berlin quote “God Bless”, the text alternative would need to be changed to “America”.
  • If used in the Lee Greenwood song lyrics “God Bless”, the text alternative would need to be changed to “the USA”.
  • If used to explain language this same image’s text alternative should be “English”.
  • If used to explain language on a page that distinguish between British English and US English the text alternative would be different yet again.

Special Rules for Logos

Text alternatives for logos should describe what the logos represent, such as:

  • Organizational name
  • Product name
  • Service

Avoid describing how the logo visually appears, unless that is the point of the image contextually (for example, a page with multiple versions of a logo over time).

On internal sites, the text alternatives for logos can use shorthand or known acronyms. On public-facing sites, the full names should be used.

Hide Decorative Images from Screen Readers

Decorative elements provide unnecessary information and make getting the important information more cumbersome. Images that do not convey unique information, do not express or explain anything specifically, should be documented as decorative. Decorative images can create a style or visual effect, but the page should continue to be usable and understandable, with or without the image.

Alternatives to Interactive Maps

Mapping solutions like Interactive Environmental Systems Research Institute (ESRI) and Google Maps, are generally considered inaccessible.

Consider whether or not a map is really needed, and if the information could be provided via text instead. Remember, Search Engine Optimization (SEO) is dependent on text. And a control can sort listings by address, relative to a starting position.

Exceptions

“Non-text Content” is a broad term, covering everything that isn’t basic text. Below are some examples of non-text content for which a different set of standards apply:

  • Images of text must adhere to Success Criterion 1.4.5 Images of Text
  • Images used as hyperlinks must adhere to Success Criterion 2.4.4 Link Purpose (In Context)
  • Radio podcasts (sound content without video) must adhere to Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded)
  • Animation or auto-advancing slides (updating visuals without sound) must adhere to Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded), 1.2.3 Audio Description or Media Alternative (Prerecorded), and 1.2.5 Audio Description (Prerecorded)
  • Videos must adhere to Success Criterion 1.2.2 Captions (Prerecorded), 1.2.3 Audio Description or Media Alternative (Prerecorded), and 1.2.5 Audio Description (Prerecorded)
  • Live streamed content must adhere to Success Criterion 1.2.4 Captions (Live)
  • Icons used on controls must adhere to Success Criterion 4.1.2 Name, Role, Value

References

Understanding Success Criterion 1.1.1: Non-text Content

Table of contents