Accessibility Wiki

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

/ (or a group role with a name) supplies that shared context to assistive tech.

How to fix

Wrap the related controls in

Question…
, or use role="group" with aria-labelledby.

Example

✕ Fails
<input type="radio" name="ship" id="s1"><label for="s1">Standard</label><input type="radio" name="ship" id="s2"><label for="s2">Express</label>
✓ Passes
<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

✕ Fails
<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>
✓ Passes
<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

Standard Criteria
EN 301 549 9.1.3.1, 9.3.3.2

References