Skip to content

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

About this Technique

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

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

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.

Note

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>

Related Resources

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.

Test Rules

The following are Test Rules related to this Technique. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.

Back to Top