<form> elements must have labels

Rule ID: label
Ruleset: axe-core 3.0
User Impact: Critical
WCAG: 1.3.1, 3.3.2

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blindness
  • Low Vision
  • Deafblindness
  • Mobility/Dexterity

Requirement(s)

  • WCAG 2.1 (A): MUST
  • WCAG 2.0 (A): MUST
  • Section 508: MUST

WCAG Success Criteria

  • 1.3.1 Info and Relationships
  • 3.3.2 Labels or Instructions

Section 508 Guidelines

  • 1194.22 (n) Information required to complete electronic forms online

How to Fix the Problem

Programmatically associate labels to all form controls and ensure there are no duplicate labels. You can do so by using an implicit <label>, explicit <label>, aria-label or aria-labelledby.

Form elements that should have labels

  • Text entry fields, e.g. <input type="text">, <input type="password"> and <textarea>
  • Radio buttons, <input type="radio">
  • Checkboxes, <input type="checkbox">
  • Select menus, <select>

The only exceptions for this requirement are:

  • Buttons, since buttons are self-labeling
  • Hidden inputs — Inputs with the type attribute value of hidden (e.g., type="hidden"). These inputs are hidden and unavailable for user input. They therefore need no label.

When adding labels, be sure to avoid the following:

First name: <input type="text" name="fname">

This markup renders to produce a textbox with the words "First name:" next to it. A sighted user will have no problem associating the text with the input field. Nevertheless, this connection is not as clear for non-sighted users, especially as forms grow longer and more complex. This ambiguity can make errors more likely, especially when the information required is more complex than a first name.

To fix the above example, you should create an association between the label text (i.e. "First name:" and the input field. Best practice is to add an explicit, rather than implicit association. Explicit labelling is supported by all modern browsers and major assistive technologies for all form elements. Explicit labels also have the added benefit of making the clickable area on a form element larger. This makes it easier for all users, though particularly those with motor disabilities, to click on relatively small form elements.

Methods for adding labels

  • Create a <label> tag wrapped around the input field. This creates an implicit, rather than explicit, association between the label and the input field.
  • Associate the <label> tag with the input field using the for attribute whose value is the id attribute of the input. This creates an explicit, rather than implicit, association between the label and the input field.
  • Use an aria-label.
  • Use aria-labelledby.

For detailed instructions on how to implement these various labelling methods, see the Automated Checks that run as a part of this rule.

Finally, ensure that each <input> element has only one label. Note that if any of your <input> elements have help text, be sure this text differs from the <label> text.

Why this is Important

Adding effective form labels is absolutely necessary to make forms accessible. The purpose of form elements such as a checkboxes, radio buttons, input fields, etc. is often clear for sighted users, even if the form element is not programmatically labeled. This isn't usually the case for users of screen readers. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product.

When labels for form elements are not present, screen reader users do not know what input data is expected. When labels are not provided for input objects, the input object's relationship to the label (or redundant text serving as the label) will not be programmatically determinable or available in text.

When labels are not present, it prevents the field from receiving focus when read by screen readers, and users with impaired motor control do not get the benefit of a larger clickable area for the control, since clicking on the label will activate the control.

Rule Description

Each <form> element must have a programmatically associated label element.

The Algorithm (in simple terms)

Ensures that every form element has a programmatically associated label

Resources

Refer to the complete list of axe 3.0 rules.