Skip to main content

Forms

Options are not grouped with their question

WCAG 2.2 success criterion 1.3.1 Info and Relationships (Level A)

WCAG 2.2
1.3.1 Info and Relationships
Level
A
Default severity
Needs review
Available in
Free

Why it matters

Options like "Yes" and "No" only make sense next to their question. Sighted visitors see the question above the choices, but a screen reader moving into the group hears "Yes, radio button, 1 of 2" with no idea what is being asked — unless the options are grouped and the group is named after the question.

Who it affects: Screen reader users, voice-control users who say a field's label to move to it, and people with memory or attention difficulties who lose a placeholder once they type.

What Lumtera flags

Two or more visible radio buttons (or two or more checkboxes) that share a name in the same form and are not inside a <fieldset> with a non-empty <legend>. A fieldset named with aria-label or aria-labelledby, or a wrapper with role="radiogroup" or role="group" and a name, also counts as grouped. Each unnamed group is reported once, on its first option.

Check ID form-group-no-fieldset — use it to filter the content report or with wp lumtera issues --rule.

How to fix it in WordPress

Wrap the options in a <fieldset> and put the question in a <legend> as its first child, e.g. <legend>Preferred contact method</legend>. In form plugins, look for a setting that shows the field label as a group label or legend; most do this for radio and checkbox fields. Alternatively, give the wrapper role="radiogroup" (or role="group") and an aria-labelledby pointing at the question.

Example

Flagged
<p>Preferred contact method</p>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
Fixed
<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

How to check your fix

  1. Update the post. The issue disappears from the Accessibility sidebar on the next check, and from the site report on the next scan.
  2. Click each field's label: the cursor should move into the field. With a screen reader, each field should announce its label when it receives focus.

Find this issue across your whole site

Lumtera runs this check in the block editor sidebar as you write, in the Elementor panel, in Review mode on the live page, and across the whole site in the content report and with wp lumtera scan. You can change its severity or turn it off in Accessibility → Settings.

All checks

Start with the free plugin today

All 64 checks, the editor sidebar, Elementor panel and site report — free, with no account and no page limits.