Technique F96:Failure due to the accessible name not containing the visible label text

Applicability

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

This technique relates to 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 2: Invisible link text disrupts visible label text string in accessible name

A download link reads "Download specification" but there is invisible link text so that the accessible name of that link is "Download gizmo specification". While the visible label text is contained in the accessible name, there is no string match which may prevent the link from being activated by speech input.


        <a href="#">Download <span class="accessibly-hidden">gizmo</span> specification</a>

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.