Providing a longer text description of an object

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Note

Adobe has plans to stop updating and distributing the Flash Player at the end of 2020, and encourages authors interested in creating accessible web content to use HTML.

This technique relates to Success Criterion 1.1.1: Non-text Content (Sufficient).

Description

The objective of this technique is to a provide longer, more detailed textual information for an image than would be suitable for the image's accessible name. An accessible button is provided adjacent to the image that displays a new panel containing the image's long description text.

Examples

Example 1: Making a hidden description visible on request

In this example, an image containing statistical data is shown. The image is provided a short textual alternative ("Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities"). Below the image, the user can click a button that will overlay a long textual description of the statistical information itself. When the button is clicked, the following actions are taken:

  • The MovieClip containing the long text description is made visible, and its AccessibilityProperties.silent property is set to false to make it visible to assistive technology. Its contents are placed in the tab order.
  • The original image and button are temporarily hidden from assistive technology and the tab order.

The image and descriptive text were taken from a previously published HTML example for long image descriptions on WebAIM.org

The results for this technique are shown in the working version of Making a hidden description visible on request. The source of Making a hidden description visible on request is available. 

import flash.accessibility. *;
import fl.accessibility.ButtonAccImpl;
import flash.system.Capabilities;

ButtonAccImpl.enableAccessibility();

//set accessibility properties
graph_mc.accessibilityProperties = new AccessibilityProperties();
graph_mc.accessibilityProperties.name = "Graph of percentage of total U.S. \ 
  noninsitutionalized population age 16-64 declaring one or more disabilities";
longDescBtn.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties = new AccessibilityProperties();
longDesc_mc.accessibilityProperties.forceSimple = false;
hideLongDesc();

//set click handlers for button
longDescBtn.addEventListener("click", function () {
  showLongDesc()
});
longDesc_mc.longDescCloseBtn.addEventListener("click", function () {
  hideLongDesc()
});

function showLongDesc() {
  // hide the original content from screen readers
  graph_mc.accessibilityProperties.silent = true;
  graph_mc.tabEnabled = false;
  graph_mc.alpha = 0.2;
  longDescBtn.enabled = false;
  longDescBtn.accessibilityProperties.silent = true;
  longDesc_mc.accessibilityProperties.silent = false;
  // make the long description panel visible, both visually and to screen readers
  longDesc_mc.visible = true;
  longDesc_mc.tabEnabled = true;
  longDesc_mc.longDescTitle.stage.focus = longDesc_mc.longDescTitle;
  if (Capabilities.hasAccessibility)
  Accessibility.updateProperties();
}

function hideLongDesc() {
  //do the opposite to what showLongDesc does
  graph_mc.accessibilityProperties.silent = false;
  graph_mc.tabEnabled = true;
  graph_mc.alpha = 1;
  longDescBtn.enabled = true;
  longDescBtn.accessibilityProperties.silent = false;
  longDesc_mc.visible = false;
  longDesc_mc.accessibilityProperties.silent = true;
  longDesc_mc.tabEnabled = false;
  longDescBtn.stage.focus = longDescBtn;
  if (Capabilities.hasAccessibility)
  Accessibility.updateProperties();
}