Back
Form elements must have labels
Ensures every form element has a label
- Status
- Failed
- Impact
- Critical
- Category
- Forms
- WCAG criteria
- Guidance
- Deque University
1 issue across 5 pages
How to fix
To fix the issue, you need to resolve at least one of these:
- Form element does not have an implicit (wrapped) <label>
- Form element does not have an explicit <label>
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute
- Element has no placeholder attribute
- Element's default semantics were not overridden with role="none" or role="presentation"
Where to fix
We found occurrences on 5 pages:
-
HTML node <input id="missing-labels-month" type="text">
CSS selector #missing-labels-month
HTML node <input id="missing-labels-year" type="text">
CSS selector #missing-labels-year
-
alphagov.github.io/accessibility-tool-audit/tests/forms-form-element-has-no-label.html
HTML node <input type="text">
CSS selector input
-
HTML node <input id="label-for-not-matching" type="checkbox" value="yes">
CSS selector #label-for-not-matching
-
alphagov.github.io/accessibility-tool-audit/tests/forms-empty-label-found.html
HTML node <input id="empty" type="text" value="">
CSS selector #empty
-
alphagov.github.io/accessibility-tool-audit/tests/forms-missing-labels-in-checkboxes.html
HTML node <input id="nationality_british" name="nationality.british" type="checkbox" value="true">
CSS selector #nationality_british
HTML node <input id="nationality_irish" name="nationality.irish" type="checkbox" value="true">
CSS selector #nationality_irish
HTML node <input id="nationality_hasOtherCountry" name="nationality.hasOtherCountry" type="checkbox" value="true">
CSS selector #nationality_hasOtherCountry