Technique G208:Including the text of the visible label as part of the accessible name

Applicability

This Technique applies to all web technologies that include interactive controls (such as links or form inputs)

This technique relates to 2.5.3: Label in Name (Sufficient).

Description

The objective of this technique is to ensure that speech input users can operate web content reliably.

When speech input users interact with a web page, they usually speak a command followed by the reference to some visible label (like text in a button, the link text, or the text labelling input fields). For example, they may speak "click search" to activate a search button.

When speech recognition software processes speech input and looks for matches, it uses the "accessible name" of controls, which can be different from the visible label. For example, a button following a search input field may contain the text "go" but uses an invisible aria-label attribute with the value "search". Since aria-label takes precedence over the text included in the button, the accessible name of this button will be "search", not "go". The Accessible Name and Description Computation defines how the accessible name is constructed.

In situations where the visible label is considered inadequate as the accessible name, it is possible to supplement text in the accessible name. However, in order to meet 2.5.3 Label in Name, the text string that makes up the visible label must occur in its entirety in the accessible name. In most situations, where it is felt that additional context is needed, it is recommended that the visible text should precede the additional text. When authors make sure that the visible label of a control is included, intact, in the accessible name of that control, speech input users can be confident that their input will be correctly interpreted.

Additional context may be more appropriately included using the Accessible Description (including through use of aria-describedby). This has the signficant benefit of improving context for some users of assistive technology without altering the accessible name.

Examples

Example 4: The visible button text matches the beginning of the accessible name

The visible text inside a button element matches the beginning of accessible name, which also includes hidden text. The idea of the hidden text is to make the button more descriptive for users of assistive technologies.

<button>Send <span class="accessibly-hidden"> Mail</span></button>

Other sources

No endorsement implied.

Tests

Procedure

For all controls with a visible label, check that:

  1. The accessible name of the control contains the same letters in the same order as the visible label.

Expected Results

  • Check #1 true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.