Failure due to "accessible name" not containing the visible label text

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

All technologies that include interactive controls (such as links or form inputs).

This technique relates to Success Criterion 2.5.3: Label in Name (Failure).

Description

The objective of this Failure is to describe situations where speech input users cannot reliably speak the name of a control because it differs from the visible label.

When speech input users interact with a web page, they usually speak a command followed by the reference to some visible label (like the text in a button or a link, or the text labelling some input). If the visible label does not match the accessible name of the control, speech users may be unable to directly activate that control.

There are techniques that go beyond the visible label text of elements. The idea is to provide more context for users of assistive technologies to whom the visible context may not be available. Examples are the use of accessible hidden (e.g., offscreen-positioned) text, the use of the aria-label attribute to overwrite the label text, or the use of the aria-labelledby attribute to compose a label text from one or more strings strings on the page.

When the use of these techniques results in an accessible name in which the exact string of the visible label does not occur in the accessible name, speech users may be unable to activate that control. Refer to the Accessible Name and Description Computation algorithm to work out the order of precedence in computing the accessible name of a control.

Examples

Example 1: Mismatch of visible button text and accessible name supplied via aria-label

The text in a search button reads "Go" but the accessible name provided in an aria-label attribute is "Find in this site"


        <button id="sitesearch" aria-label="Find in this site">Go</button>
        

Example 3: Input with a hidden label carrying text that differs from the input's value attribute

An input of type="submit" with the value="search" which is exposed as visible label of the input, has a programmatically linked and accessibly hidden label enclosing the text "Find in this site" referenced by aria-labelledby. Because aria-labelledby takes precedence over the value of the input, the accessible name of the input in most browser / screen reader combinations will be "Find in this site". Speech users speaking a command such as "Click search" will be unable to activate the input.


        <div id="hidden-label">Find in this site</div>
        <input type="submit" aria-labelledby="hidden-label" value="search">
        

Tests

Procedure

For all controls with a visible label (e.g., link text, button text, programmatically linked label, images in links with text), check that:

  1. The accessible name is the same as the visible label.
  2. The accessible name contains a match for the string of the visible label.

Expected Results

  • If checks #1 and #2 are false, the content fails the Success Criterion.