Demo Mode — read-only previewStart free trial
Issues

Form elements must have labels

Critical1.3.14.1.2AXE · labelDocs
Pages 1on W3C BAD Demo
Elements 11
Open 21d 23hsince 08.09.26
First seen 08.09.26
Last seen 08.09.26

Every form input must have a programmatically associated label so assistive technologies can identify it.

Scanner evidence

Engine: axeRule: labelWCAG: 1.3.1, 4.1.2
Ensure every form element has a label

How to fix

Fix any of the following: Element does not have an implicit (wrapped) <label> 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"

Affected elements (11)

https://www.w3.org/WAI/demos/bad/before/survey.html11
  1. <input class="align" type="radio" name="res" value="1">

    input[value="1"]

    on https://www.w3.org/WAI/demos/bad/before/survey.html

  2. <input class="align" type="radio" name="res" value="2">

    input[value="2"]

    on https://www.w3.org/WAI/demos/bad/before/survey.html

  3. <input class="align" type="radio" name="res" value="3">

    input[value="3"]

    on https://www.w3.org/WAI/demos/bad/before/survey.html

Why this matters

Every form field needs a <label> with a matching for attribute.

WCAG Technique H44

AI guidance

Remediation suggestions generated by AI. Review before applying.

Why this matters: Screen reader users cannot identify what each radio button represents without an associated label, making the form impossible to navigate or complete accurately.

Before

<input class="align" type="radio" name="res" value="1">
<input class="align" type="radio" name="res" value="2">
<input class="align" type="radio" name="res" value="3">

After

<label>
  <input class="align" type="radio" name="res" value="1">
  Option 1
</label>
<label>
  <input class="align" type="radio" name="res" value="2">
  Option 2
</label>
<label>
  <input class="align" type="radio" name="res" value="3">
  Option 3
</label>

Notes: This uses implicit labeling (wrapping the input inside the <label> element), which is the simplest semantic approach. Replace "Option 1/2/3" with actual descriptive text relevant to your form context. Alternatively, if labels must be separate from inputs, use explicit labeling with <label for="id"> paired with id attributes on each input — but wrapped labels are preferred when layout permits.

WCAG Criterion: 4.1.2 Name, Role, Value

Powered by claude-haiku-4.5

Activity (0)

No activity yet.