Missing Form Labels

Missing form labels occur when an input, select, or textarea element has no
programmatically associated label. Without a label, screen reader users hear
only the input type when they focus the field — "edit text" or "combo box" —
with no indication of what information is expected.
^[1]

---

Who it affects

Missing labels primarily affect screen reader users and voice input users.
Voice control software such as Dragon NaturallySpeaking allows users to
activate form fields by speaking their label — "click Email address".
Without an accessible label, the field cannot be targeted by voice.
^[2]

---

How it fails users

A screen reader user tabbing through a form with missing labels encounters:

• "Edit text" with no indication of what to type
• "Combo box" with no indication of what to select
• "Checkbox" with no indication of what they are agreeing to

This makes form completion impossible without sighted assistance.

---

How to detect it

Automated scanners reliably detect inputs with no associated label. They
cannot detect whether an existing label is accurate or descriptive — an
input labelled "Field 1" passes the rule but fails in practice.
^[3]

---

How to fix it

The four correct methods for associating a label with an input:

1. Explicit label (recommended)
Use a label element with a for attribute matching the input's id exactly.
This is the most robust method and is supported universally.

2. Implicit label (wrapping)
Wrap the input inside a label element. Works well for checkboxes and
radio buttons where the label text is adjacent.

3. aria-label
Add aria-label directly to the input. Use when no visible label is
possible — the label text will not be visible on screen.

4. aria-labelledby
Reference another element's id as the label. Use when visible text
exists elsewhere on the page that serves as the label.
^[1]

---

Placeholder is not a label

Using placeholder text as a substitute for a label is one of the most
common form accessibility mistakes. Placeholder text:

• Disappears when the user starts typing
• Has insufficient contrast by default in most browsers
• Is not reliably announced as the input's label by all screen readers
• Cannot be referenced by voice control software

Always provide a visible label element in addition to any placeholder text.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.3.1: Info and Relationships. https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html ↑
2. W3C Web Accessibility Initiative. Understanding Success Criterion 1.3.5: Identify Input Purpose. https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html ↑
3. WebAIM. Creating Accessible Forms. https://webaim.org/techniques/forms/ ↑