Using scripting to change control labels

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:

Description

The purpose of this technique is to allow users to choose to have additional information added to the label of a button or other control so that it can be understood out of context.

Some users prefer to have control labels that are self-contained, where there is no need to explore the context of the control. Other users find including the context information in each button to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them.

A control is provided near the beginning of the page that will expand the labels for controls on the page so that no additional context is needed to understand the purpose of those controls. It must always be possible to understand purpose of the control directly from its label.

This technique expands the control labels only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

Examples

Example 1: Using ActionScript to add contextual information directly to the label of a button

This example uses ActionScript to add contextual information directly to the label of a button. When the "Expand Button Labels" button is toggled, each button on the page has its label property modified. 

import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
btn1.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e) {
  btn2.label = btn1.selected? "PDF version of 2010 brochure": "PDF";
  btn2.width = btn1.selected? 200: 100;
  btn3.label = btn1.selected? "Text version of 2010 brochure": "Text";
  btn3.width = btn1.selected? 200: 100;
  btn4.label = btn1.selected? "Word version of 2010 brochure": "Word";
  btn4.width = btn1.selected? 200: 100;
}

The result can be seen in the working example of adding contextual information to a button label. The source of adding contextual information to a button label is available.