Introduction

Every non-text element requires a text alternative.

People who are blind do not access images directly. They listen to their screen readers read the alternative text that the developer or content creator provided for the image. In the case of users who are deafblind, the text is converted to refreshable braille characters that they feel with their fingers.

The techniques for supplying alternative text vary, depending on whether the image is presented in the <img> element, via SVG markup, via the HTML 5 <canvas> element, or via some other method. But the concept is the same: The alternative text must be meaningful, and must serve as an effective substitute for the image in a way that makes sense to users who are blind.

Other kinds of content usually require alternative representations too, such as:

  • Video (which requires captions, a transcript, and which may require audio descriptions)
  • Audio (which requires a transcript, at a minimum)
  • Plug-ins (e.g. Silverlight and Flash, which require effective use of their respective accessibility APIs)
  • Documents (e.g. Word, PowerPoint, PDF, etc., which also require effective use of their respective APIs)

Often it is best to also create an HTML-based alternative version of non-HTML content, because HTML usually offers the greatest potential for accessibility across the greatest diversity of devices.

Summary

All non-text content must be represented in a text format in one way or another, whether in the form of an alt attribute for an image, an alternative representation of non-HTML objects, or within the accessibility API methods of non-HTML objects.

Resources

Deque University

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Image Alt Text

Checklist - Deque

Informative Images

  • Images that convey content MUST have programmatically-discernible alternative text.
  • The alternative text for informative images MUST be meaningful (accurately conveying the purpose of the image and the author's intent in a way that is useful to those who cannot see the image).
  • Alternative text SHOULD NOT include words that identify the element as a graphic or image.
  • The length of the alternative text for informative images SHOULD be concise (no more than about 250 characters).

Decorative or Redundant Images

  • Images that do not convey content, are decorative, or are redundant to content that is already conveyed in text MUST be given null alternative text (alt=""), ARIA role="presentation", or implemented as CSS backgrounds.

Actionable Images

  • All actionable images (e.g. links, buttons, controls) MUST have alternative text.
  • The alternative text for actionable images MUST be meaningful (accurately conveying the purpose or result of the action).
  • Alternative text SHOULD NOT include words that identify the element as a link, graphic, or image.
  • The length of the alternative text for actionable images SHOULD be concise (no more than about 250 characters).

Form Inputs type="image"

  • Form inputs with type="image" MUST have alternative text.
  • The alternative text for form inputs with type="image" MUST accurately convey the purpose or result of the input action.
  • The length of the alternative text for inputs with type="image" SHOULD be concise (no more than about 250 characters).

Animated Images

  • A method MUST be provided to pause, stop, or hide any prerecorded video-only content that begins playing automatically and which lasts 5 seconds or more.
  • Animated images MUST NOT flash or flicker at 3 or more times per second.

Complex Images - Extended Descriptions

  • Complex images MUST be briefly described using alt text AND MUST have a more complete long description.
  • The long description (or a link or button to access the long description) SHOULD be visible to sighted users.
  • The long description SHOULD be programmatically associated with the image.

Images of Text

  • An image MUST NOT include informative text if an equivalent visual presentation of the text can be rendered using real text.
  • Images MUST NOT include informative text, unless the text is essential (such as a logo), or the font, size, color, and background are customizable.

CSS Background Images

  • Purely decorative or redundant CSS images SHOULD NOT have a text alternative in the HTML content.
  • The alternative text for informative or actionable CSS images MUST be available as programmatically-discernible text in the HTML content.
  • The alternative text (in the HTML content) for informative or actionable CSS images MUST adequately and accurately describe the purpose of the image.

Image Maps

  • The alternative text for the <img> of a client-side image map MUST be available as programmatically-discernible text.
  • The alternative text for the <img> element of a client-side image map MUST be meaningful (accurately describing the purpose or author's intent in a way that is useful to people who cannot see the image).
  • The length of the alternative text for the <img> element of client-side image maps SHOULD be concise (no more than about 250 characters).
  • The alternative text for the <area> of a client-side image map MUST be available as programmatically-discernible text.
  • The alternative text for the actionable <area> element of a client-side image map MUST be meaningful (accurately describing the purpose or result of the action in a way that is useful to people who cannot see the image).
  • The length of the alternative text for the <area> element of client-side image maps SHOULD be concise (no more than about 250 characters).
  • Server-side image maps SHOULD NOT be used when a client-side image map (or other method) can accomplish the same functionality.

Download Summary & Checklist

Tips & Tricks

Images

  • Informative, Decorative, Functional
  • Images of text, Image maps
  • Complex images, Groups of images
  • Alt VS role="presentation"

Advanced Alt Text & Extended Descriptions

Checklist - Deque

Introduction category

None documented

Download Summary & Checklist

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

SVG

Checklist - Deque

SVG as img src

  • All SVG <img> elements SHOULD be set to role="img".
  • All informative or actionable SVG <img> elements MUST have meaningful, concise alternative text (via alt, aria-label, or aria-labelledby).

Inline SVGs

  • All <svg> elements MUST be set to role="img".
  • All informative or actionable <svg> elements MUST have meaningful, concise alternative text (via <title> element).
  • The alternative text (<title>) of an <svg> element MUST be programmatically associated with the <svg> element via aria-labelledby.
  • All text within the image that needs to be spoken by a screen reader MUST be associated with the <svg> element using aria-labelledby.
  • The total number of characters of alt text associated with the <svg> element SHOULD NOT exceed 250 characters.

Embedded SVGs

  • An SVG object SHOULD NOT be embedded via <object> or <iframe>.

Complex Alternative Text

  • Complex <svg> images MUST have meaningful, concise alternative text AND MUST have a more complete long description.
  • A <desc> element MUST be used to provide a detailed description of a complex <svg> if it is not provided in any other way.
  • The <desc> attribute of an <svg> element MUST be programmatically associated with the <svg> element (via aria-labelledby).

Text in SVGs

  • Text within <svg> elements SHOULD be eliminated OR SHOULD be kept to a minimum.
  • All <text> elements inside <svg> elements MUST be referenced in the alternative text of the <svg> element, or in a long description.

SVG Color Contrast

  • SVG images SHOULD include a base background color behind the important parts of the image, at a minimum.
  • SVG images SHOULD be styled to ensure compatibility with Windows High Contrast Mode

Animated SVG Content

  • SVG animations SHOULD use JavaScript, rather than the <animate> element.
  • SVG animations MUST not flash or blink at a rate of 3 times per second or more.
  • SVG animations MUST NOT auto-play for more than 5 seconds.
  • SVG animations MUST allow users to pause the animation.
  • SVG animations SHOULD NOT distract the user from the main purpose of the web content.

Interactive SVGs

  • Interactive <svg> objects MUST be fully keyboard-accessible.
  • Interactive <svg> objects MUST be fully touchscreen-accessible.
  • Interactive <svg> objects MUST communicate the applicable name, role, and value of controls, events, and semantic elements within the <svg> object.

Download Summary & Checklist

Tips & Tricks

  • Preferred approach: Basic <svg>...<svg>
  • Use <title>, <desc> and aria-labelledby for maximum accessibility

Resources

Specifications

Examples

None documented

Miscellaneous

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Icon Fonts

Checklist - Deque

Icon Fonts

  • Informative icon fonts without accompanying visible text SHOULD be assigned role="img".
  • Informative icon fonts without accompanying visible text MUST have a text alternative.
  • Actionable icon fonts without accompanying visible text MUST have a text alternative.
  • The alternative text for informative icon fonts MUST be meaningful.
  • Decorative or redundant icon fonts SHOULD be set to aria-hidden="true".

Download Summary & Checklist

Tips & Tricks

  • Strongly discouraged, use SVG instead
  • A11Y problems when fonts are replaced

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

Practice

WCAG Annotations

None documented

Design Annotations

None documented

HTML 5 Canvas

Checklist - Deque

HTML 5 <canvas>

  • When <canvas> elements are used to display graphics, they MUST be assigned role="img".
  • All <canvas> elements MUST have a text alternative.
  • The alternative text for <canvas> elements MUST be meaningful.
  • All <canvas> elements with complex images MUST have a detailed text alternative.
  • All <canvas> elements SHOULD have a background fill.
  • If text is required in a graphic, consider using SVG instead of <canvas>.
  • A <canvas> element operable with mouse MUST also be keyboard accessible.

Download Summary & Checklist

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Multimedia, Plug-ins, and Documents

Checklist - Deque

Multimedia

  • All prerecorded video MUST have synchronized captions.
  • Prerecorded audio MAY have synchronized captions.
  • All live video with dialog and/or narration MUST have synchronized captions.
  • Live audio consisting mainly of dialog and/or narration SHOULD have synchronized captions.
  • All prerecorded video and audio MUST have text transcripts.
  • Videos MUST include audio descriptions of important visual content that is not conveyed through the audio.

Plug-ins

  • All <object> elements MUST have alternative text.
  • A full-featured HTML alternative SHOULD be provided for Silverlight and Flash objects.
  • Accessible Silverlight and Flash objects MUST use the accessibility API.
  • Silverlight and Flash objects MUST adhere to basic content accessibility principles.
  • Silverlight and Flash objects MUST adhere to multimedia accessibility principles.
  • Silverlight and Flash objects MUST adhere to basic interactive accessibility principles.

Documents

  • An HTML version of non-HTML content SHOULD be made available to users.
  • Non-HTML documents MUST adhere to basic accessibility principles.
  • PDF files MUST be in tagged PDF format.
  • EPUB files MUST adhere to HTML accessibility principles, and the accessibility principles of any other technologies used within the EPUB document.
  • EPUB files SHOULD be in EPUB 3 format.
  • EPUB documents SHOULD adhere to the additional accessibility principles in the EPUB Accessibility specification.

Download Summary & Checklist

Tips & Tricks

None documented

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented