label
Web validation
Labels give every form field a clear programmatic name so assistive technology can announce its purpose. When a label is absent, or not associated with the form field correctly, screen-reader users cannot understand what information to enter, and people with limited dexterity lose the larger clickable target that a label provides. Clear labeling also helps browsers, form-fill tools, and automated testing identify each control.
Pass Patterns
Explicit <label> associated with an input via id
The label's for attribute matches the input's id, so the label text becomes the input's accessible name.
<label for="email">Email address</label>
<input type="email" id="email" name="email" />Implicit <label> wrapping the control
The <label> wraps the input, which associates the two without needing for and id.
<label>
First name
<input type="text" name="first-name" />
</label>Label referenced with aria-labelledby
The input's aria-labelledby attribute references the id of a <span> that contains the label text.
<span id="last-name">Last Name</span>
<input type="text" aria-labelledby="last-name" />An accessible name provided by an aria-label attribute
Note that this method is not recommended because the input field will lack a visible label which may violate the requirement of Success Criterion 3.3.2 Labels or Instructions.
<input type="text" aria-label="First Name" />Fail Patterns
Input missing a label
The input has no label of any kind, so it has no accessible name.
<input type="text" id="username" />The <label> element is not programmatically associated with the <input> field
The label is visible, but without for/id or wrapping, it isn't connected to the input.
<label>Email address</label>
<input type="email" name="email" />WCAG techniques
Sufficient techniques
- H44: Using label elements to associate text labels with form controls
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used
Advisory techniques
Failure techniques
ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Move focus to the form field.
- Listen for the field's name.
Expected result: The screen reader announces the field's label (for example, “Email address, edit text”).
Actual result: The screen reader only announces the field type, without a name that conveys its purpose.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires that every user-interface component expose a programmatic name, role, and, where applicable, value. Inputs without an accessible name violate that requirement.
Why is this issue marked as Critical?
Without a programmatic label, assistive-technology users cannot determine what data a field expects, leading to form errors and abandonment. Missing labels also reduce the clickable area for users with motor disabilities. Because the defect blocks essential form interaction across browsers and assistive technologies, it is classified as Critical.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |
| Section 508 | 1194.22(n) | When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. |
| 508 Trusted Tester | 1.3.1-programmatic-label, 5.C | The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical). |