Option group with no group label

WCAG 1.3.1, 3.3.2 (A) · EN 301 549 9.1.3.1

Related checkboxes or radio buttons are not wrapped in a <fieldset> with a <legend>.

Why it matters

With no grouping, a screen reader reads "S, M, L, XL" without ever saying the question was "Size". Every option is heard on its own, out of context.

How to fix it

Wrap the group in a <fieldset> and put the question in the <legend>. Alternatively use role="radiogroup" with an aria-label.

<p>Size</p>
<input type="radio" name="size" id="s"><label for="s">S</label>
<input type="radio" name="size" id="m"><label for="m">M</label>

<fieldset>
  <legend>Size</legend>
  <input type="radio" name="size" id="s"><label for="s">S</label>
  <input type="radio" name="size" id="m"><label for="m">M</label>
</fieldset>

Related

• Form fields with no label
• The placeholder is doing the label’s job
• Required field marked visually only
• Heading levels skipped