Radio and checkbox groups need a fieldset and legend

Rule fieldset-legend · Forms · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Individual radio labels ("Yes"/"No") are meaningless without the question. A <fieldset>/<legend> (or a group role with a name) supplies that shared context to assistive tech.

How to fix#

Wrap the related controls in <fieldset>``<legend>Question</legend>…</fieldset>, or use role="group" with aria-labelledby.

Example#

<input type="radio" name="ship" id="s1"><label for="s1">Standard</label><input type="radio" name="ship" id="s2"><label for="s2">Express</label>

<fieldset><legend>Shipping</legend><input type="radio" name="ship" id="s1"><label for="s1">Standard</label><input type="radio" name="ship" id="s2"><label for="s2">Express</label></fieldset>

Example#

<fieldset><input type="radio" name="pay" id="p1"><label for="p1">Card</label><input type="radio" name="pay" id="p2"><label for="p2">Cash</label></fieldset>

<fieldset><legend>Payment</legend><input type="radio" name="pay" id="p1"><label for="p1">Card</label><input type="radio" name="pay" id="p2"><label for="p2">Cash</label></fieldset>

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

3.3.2 Labels or Instructions — Level A#

Inputs need labels or instructions so users know what to enter.

Understanding 3.3.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• W3C — Grouping Controls