Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

-

FLASH11: Providing a longer text description of an object

Applicability

Adobe Flash-based Content

This technique relates to:

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 example 1

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