Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

FLASH11: Providing a longer text description of an object

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support for Flash for general information on user agent support.

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 image and descriptive text were taken from an 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.

Example Code:

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();
}

Tests

Procedure

When a Flash movie contains images that require long descriptions, confirm that a longer description is made available through a separate button.

Expected Results