Web Happens

Accessibility Action report

Your Awesome Website

Back

Form elements must have labels

Ensures every form element has a label

Status
Failed
Impact
Critical
Category
Forms
Guidance
Deque University

1 issue across 5 pages

#1

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:

  1. alphagov.github.io/accessibility-tool-audit/tests/forms-labels-missing-when-they-would-look-clumsy-for-some-form-controls.html

    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

  2. alphagov.github.io/accessibility-tool-audit/tests/forms-form-element-has-no-label.html

    HTML node 
    <input type="text">
    CSS selector 
    input

  3. alphagov.github.io/accessibility-tool-audit/tests/forms-label-element-with-for-attribute-but-not-matching-id=-attribute-of-form-control.html

    HTML node 
    <input id="label-for-not-matching" type="checkbox" value="yes">
    CSS selector 
    #label-for-not-matching

  4. alphagov.github.io/accessibility-tool-audit/tests/forms-empty-label-found.html

    HTML node 
    <input id="empty" type="text" value="">
    CSS selector 
    #empty

  5. 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