What This Rule Checks
Every form control, such as text fields, checkboxes, or buttons, needs to have an accessible label that screen readers can announce. These labels can be provided using the <label> element, aria-label, or aria-labelledby. Without a proper label, screen reader users won’t understand the purpose of the form control, leading to confusion and difficulty navigating the form.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
The title attribute is not consistently announced by all screen readers and is invisible to sighted users unless they hover. Voice control users cannot target fields labeled only by title. A visible <label> serves all users.
How to Fix
Use Explicit Labels: The most reliable way to label form controls is by using an explicit <label> element. This involves associating a <label> with a form control through the for attribute. This method is widely supported and unambiguous for assistive technologies.
<label for=”fname”>First Name:</label>
<input type=”text” name=”fname” id=”fname”>
<label for=”lname”>Last Name:</label>
<input type=”text” name=”lname” id=”lname”>
Use Implicit Labels (If Necessary): In some cases, labels can be applied implicitly by wrapping the form control inside the <label> element. While this works in most cases, it may have inconsistent support with certain elements or assistive technologies.
<label>First Name: <input type=”text” name=”fname”></label>
<label>Last Name: <input type=”text” name=”lname”></label>
Use aria-label (When Absolutely Necessary): In rare cases, where the form control cannot be labeled using a <label>, you can apply an aria-label directly to the element. This provides an invisible label for screen readers but is not visible to sighted users.
<input type=”text” aria-label=”Search”>
Use aria-labelledby for Complex Labeling: When multiple form elements need to share the same label or when a label is provided elsewhere on the page, aria-labelledby can be used to reference the element containing the label.
<p id=”search”>Search</p>
<input type=”text” aria-labelledby=”search”>
Code Examples
<!-- Form control labeled only by title attribute -->
<input
type="text"
title="Enter your name">
Copy
<!-- Visible label with for association -->
<label for="name">Name</label>
<input
type="text"
id="name">
<!-- Or with aria-label as backup when visible label is impractical -->
<input
type="search"
aria-label="Search products">
<button>Search</button>
Copy
Common Mistakes to Avoid
- Relying on title tooltips as the primary label for form controls.
- Using aria-describedby as the only means of labeling (it’s supplemental, not the name).
- Hiding labels visually when they would benefit all users.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Form accessibility is one of the most common sources of accessibility complaints. Every form control must have a programmatically associated label that is visible and descriptive. Test every form with keyboard-only navigation.