This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique F68:Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name

About this Technique

This technique relates to 4.1.2 Name, Role, Value (Failure).

This failure applies to HTML controls.

Failure techniques show examples of how content can fail particular WCAG success criteria. However, content may still satisfy those criteria if it includes equivalent/alternative content or functionality that does meet the normative requirements. See About WCAG Techniques.

Description

This failure describes a problem that occurs when a form control does not have a name exposed to assistive technologies. The result is that some users will not be able to identify the purpose of the form control. The name can be provided in multiple ways, including the label element. Other options include use of the title attribute and aria-label which are used to directly provide text that is used for the accessibility name or aria-labelledby which indicates an association with other text on a page that is providing the name. Button controls can have a name assigned in other ways, as indicated below, but in certain situations may require use of label, title, aria-label, or aria-labelledby.

Note

Elements that can use an explicitly-associated label element are:

  • input
  • textarea
  • select

The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button):

  • Submit and Reset buttons (<input type="submit"> or <input type="reset">)
  • Image buttons (<input type="image">)
  • Hidden input fields (<input type="hidden">)
  • Buttons (button elements or <input type="button">)

Examples

Example 1

The following example demonstrates a form that visually presents labels for form controls, but does not use the label element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.

<form>
  First name:
  <input type="text" name="firstname">
  <br>
  Last name: 
  <input type="text" name="lastname">
  <br>
  I have a dog <input type="checkbox" name="pet" value="dog">
  I have a cat <input type="checkbox" name="pet" value="cat">
</form>

Example 2

In the following code example, label elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.

<form> 
  <p> 
    <label>First Name</label>
    <input type="text" name="firstname"> 
    <label>Last Name</label> 
    <input type="text" name="lastname"> 
  </p> 
</form>

Example 3

The search text box in the following code example does not have a programmatically determinable name. The name can be supplied with any of the approaches mentioned above.

<input type="text" value="Type your search here">
<input type="submit" value="Search">

Related Resources

No endorsement implied.

Tests

Procedure

For each user interface component exposed in the accessibility tree, such as input, textarea, and select elements:

  1. Check, using the browser's accessibility tree or other accessibility inspection tools, that the element has a programmatically determined accessible name that is neither empty nor composed solely of whitespace characters.

Expected Results

  • If check #1 is false, then this failure condition applies and the content fails this success criterion.
Back to Top