Associate labels with controls, objects, icons, and images. If an image is used to identify programmatic elements, the meaning of the image must be consistent throughout the application.


Rationale

Labels name an object (e.g., icon names, window titles, button labels, edit fields). The labels must be associated programmatically with the object in order for the assistive technology to make them available to the user.

Most screen readers allow users to assign text names to bitmap images. If the bitmap image changes meaning during program execution the text name assigned with the screen reader is no longer valid and is confusing to the user.


Required development techniques


The following techniques are the minimum required to meet Checkpoint 2.3 from the IBM Software Accessibility Checklist:

  1. Labels must be associated with all user controls, objects, window titles, icons and images.
  2. All images, that are not decorative and have meaning, must be used consistently through the application.

Examples for Microsoft Windows developers

1. A label must be associated with all user controls, objects, window titles, icons and images.

Example 1

Software using standard Windows controls, no additional work is required to expose the accessible name of the user interface objects. For custom controls use Microsoft Active Accessibility (MSAA) to programmatically expose the name and description of each user interface object.

2. All images, that are not decorative and have meaning, must be used consistently through the application.

Example 2

Use the standard Windows tooltip control to apply a label to each image.

Examples for Eclipse SWT developers

1. A label must be associated with all user controls, objects, window titles, icons and images.

Example 3

Software developed using Eclipse SWT, instantiating widgets and their children creates a tree hierarchy of controls and their association. A label widget must be created immediately before the control (text widget or combo box) for the label to be associated. If necessary, the z-order of children can be changed using the org.eclipse.swt.widgets.Control.moveAbove() and moveBelow () methods or the org.eclipse.swt.widgets. Composite getTabList() and setTabList methods for Control and Composite object types respectively.

Example 4

The dialog box and code fragment below are problematic. Only the first label, "Last" is associated with the text widget. The "name" label will not be announced to the assistive technology user.

Last, name. OK, Cancel

public static void main (String [] args) { Display display = new Display (); Shell shell = new Shell (display); Label label1 = new Label (shell, SWT.NONE); label1.setText ("Last:"); Text text = new Text (shell, SWT.BORDER); text.setLayoutData (new RowData (100, SWT.DEFAULT)); Label label2 = new Label (shell, SWT.None); label2.setText ("name"); shell.setDefaultButton (cancel); shell.setLayout (new RowLayout ()); shell.pack (); shell.open (); while (!shell.isDisposed ()) { if (!display.readAndDispatch ()) display.sleep (); } display.dispose (); }

There are two ways to correct this implementation. One is to override the accessible name for the text widget. This will provide the assistive technology user with the complete label, "Last name", without changing the layout.

text.getAccessible().addAccessibleListener( new AccessibleAdapter() { public void getName(AccessibleEvent event) { event.result = "Last name"; } } );

The second option is to change the layout by combining the label to fully describe the text widget, as in the example below:

Last, name: OK, Cancel

public static void main (String [] args) { Display display = new Display (); Shell shell = new Shell (display); Label label1 = new Label (shell, SWT.NONE); label1.setText ("Last name:"); Text text = new Text (shell, SWT.BORDER); text.setLayoutData (new RowData (100, SWT.DEFAULT)); shell.setDefaultButton (cancel); shell.setLayout (new RowLayout ()); shell.pack (); shell.open (); while (!shell.isDisposed ()) { if (!display.readAndDispatch ()) display.sleep (); } display.dispose (); }

2. All images, that are not decorative and have meaning, must be used consistently through the application.

Example 5

When bitmap images are used to identify controls, status indicators or other programmatic elements, the meaning assigned to those images must be consistent throughout an application. For example, a simple CD icon icon of a compact disc could be used for multiple actions. For example, the CD could be used to open, write, play or even eject the CD. In this example, a different icon should be used to indicate each distinct action.

Examples for Java developers

See the examples to implement labels using Java Swing.

Examples for iOS developers

1. A label must be associated with all user controls, objects, window titles, icons and images.

Example 6

Software using standard iOS UI elements must have the label attribute set. Some UI elements have a default label value. Hint attributes should be provided when needed.

Custom widgets should programmatically implement the accessibilityLabel method and return an appropriate label. They should likewise implement accessiblityHint and return a localized hint

2. All images, that are not decorative and have meaning, must be used consistently through the application.

Example 7

Use the iOS label attribute to apply a label to all meaningful icons and images.


Recommended development techniques

The techniques above are required; the following technique is recommended to enhance accessibility:

Avoid having multiple objects with the same name on the same form or dialog if they do not perform the same function.


Required test techniques

Test the software to ensure that it complies with accessibility requirements.

Required test software

Install the following software as needed to test this checkpoint.

Test techniques

The following test techniques are required to verify this checkpoint.


Text elements
Action Result

With a screen reader active, navigate to every user interface element. (Use Tab, the Arrow keys, and any other application specific navigation keys to move to all controls and objects.)

Pass:

Fail:

Debug techniques

If the screen reader test fails for any user interface element, the problem must be debugged with an accessibility API validation tool. These techniques can be used to help determine if a problem is caused by a coding error in the application, or if it is caused by a screen reader defect.


The following techniques are required to verify this checkpoint:
Action Results for compliance
  1. Review the development techniques and insure the implementation is correct according to the development techniques.
  2. Use the API validation tool that is appropriate to your platform to determine if the development techniques have been implemented properly.
Additional information on how to use the API validation tool is included with the tool.
  1. The implementation is correct according to the development techniques.
  2. The accessibility API validation tool shows that the API properties expose sufficient information as defined in the development techniques for this checkpoint.
  3. Additional instructions:

©2009, 2013 IBM Corporation

Last updated August 22, 2013.