Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name

Metadata

general

failure

When to Use

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

Description

The objective of this Failure is to describe situations where speech input users cannot reliably speak the name of a control because although it has a visible label, it lacks an accessible name.

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 control lacks an accessible name, speech users won't be able to activate the control using its visible label.

Examples

A text input with a visible label, but without an accessible name

The text input is preceded by a visible text label "Enter name", but the text is not marked up as a <label> for the input, and there is no alternative way (e.g., aria-label) to provide the input with an accessible name at all.


					<p>Enter name</p>
					<input type="text">

A text input with a visible label and aria-labelledby pointing to a non-existent id

The text input is preceded by a visible text label "Enter name". The text's container has an id of nameEntry, but the input has an aria-labelledby referencing a non-existent name-entry id. As a result, the input lacks an accessible name altogether.


					<p id="nameEntry">Enter name</p>
					<input type="text" aria-labelledby="name-entry" >

Tests

Procedure

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

  1. The control has a visible text label.
  2. The control has an accessible name.
  3. The accessible name contains the text that appears as the visible label.

Expected Results