Checkbox Group
Group related checkboxes with a fieldset and legend for clear screen reader announcements and logical form structure.
The Bad (Inaccessible)
<div class="checkbox-container">
<p>Select your interests:</p>
<div>
<input type="checkbox" id="music">
<span>Music</span>
</div>
<div>
<input type="checkbox" id="sports">
<span>Sports</span>
</div>
<div>
<input type="checkbox" id="art">
<span>Art</span>
</div>
</div>
Accessibility-Ready Code
<fieldset>
<legend>Select your interests:</legend>
<div>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
</div>
<div>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
</div>
<div>
<input type="checkbox" id="art" name="interests" value="art">
<label for="art">Art</label>
</div>
</fieldset>
fieldset
legend Select your interests:
div
input(type="checkbox" id="music" name="interests" value="music")
label(for="music") Music
div
input(type="checkbox" id="sports" name="interests" value="sports")
label(for="sports") Sports
div
input(type="checkbox" id="art" name="interests" value="art")
label(for="art") Art
<fieldset>
<legend>Select your interests:</legend>
{['Music', 'Sports', 'Art'].map((item) => (
<div key={item}>
<input
type="checkbox"
id={item.toLowerCase()}
name="interests"
value={item.toLowerCase()}
onChange={handleChange}
/>
<label htmlFor={item.toLowerCase()}>{item}</label>
</div>
))}
</fieldset>
<fieldset>
<legend>Select your interests:</legend>
<div v-for="item in ['Music', 'Sports', 'Art']" :key="item">
<input
type="checkbox"
:id="item.toLowerCase()"
name="interests"
:value="item.toLowerCase()"
v-model="selectedInterests"
/>
<label :for="item.toLowerCase()">{{ item }}</label>
</div>
</fieldset>
<fieldset class="space-y-3">
<legend class="text-lg font-semibold text-slate-800 mb-2">
Select your interests:
</legend>
<div class="flex items-center gap-3">
<input type="checkbox" id="music" name="interests" value="music"
class="w-5 h-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
<label for="music" class="text-slate-700">Music</label>
</div>
<div class="flex items-center gap-3">
<input type="checkbox" id="sports" name="interests" value="sports"
class="w-5 h-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
<label for="sports" class="text-slate-700">Sports</label>
</div>
<div class="flex items-center gap-3">
<input type="checkbox" id="art" name="interests" value="art"
class="w-5 h-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
<label for="art" class="text-slate-700">Art</label>
</div>
</fieldset>
The Standard
Checkbox groups must be wrapped in a <fieldset> with a <legend> to provide context. This ensures screen readers announce the group’s purpose before each checkbox.
WCAG Criteria
- 1.3.1 Info and Relationships (Level A): Form controls must be grouped logically.
- 3.3.2 Labels or Instructions (Level A): Labels must be programmatically associated.
- 4.1.2 Name, Role, Value (Level A): Checkbox state must be determinable.
❌ The Bad (Inaccessible)
What’s Wrong?
- No Fieldset/Legend: Screen readers don’t know the checkboxes are related.
- No Label Association: Using
<span>instead of<label for="">breaks click-to-toggle. - Missing Name Attribute: Form submission won’t group values correctly.
✅ The Good (Accessibility-Ready Code)
Why This Works
- Fieldset Groups Inputs: Screen reader announces: “Select your interests, group”.
- Legend = Group Label: Provides context before reading individual options.
- Label Association: Clicking the text toggles the checkbox.
Accessibility Checklist
- Wrap related checkboxes in a
<fieldset>. - Use
<legend>to describe the group purpose. - Associate each
<label>with its checkbox usingforandid. - Include a
nameattribute for form submission. - Ensure visible focus states on checkboxes.
📍 Perfect Implementation Reference
<fieldset>
<legend>Select notification types:</legend>
<input type="checkbox" id="email" name="notify" value="email">
<label for="email">Email</label>
</fieldset>Technical Deep Dive
The Accessibility Tree
Role: group
Name: "Select your interests"
Children:
- Role: checkbox, Name: "Music", State: unchecked
- Role: checkbox, Name: "Sports", State: unchecked
- Role: checkbox, Name: "Art", State: uncheckedFocus Flow
- Tab Key: Moves focus to each checkbox in order.
- Space Key: Toggles the checkbox state.
- Label Click: Triggers the associated checkbox.
🧪
Interactive Behavioral Lab
💻
Interactive Sandbox
LIVE PREVIEW
🔬 Technical Internals
Understand how this component is processed by the browser and Assistive Technology (AT). This section bridges the gap between visual code and the hidden logic that powers accessibility.
🌲 Accessibility Tree
The data structure used by screen readers to "see" your page. It translates HTML roles and attributes into standardized objects.
⚙️ Event Logic
Expected behavioral standards for keyboard navigation and state transitions. Crucial for users who don't use a mouse.
- Focus: Highlights via
:focus-visible - Activation: Responds to
EnterandSpace - Role: Identified as
Checkbox Pattern
🌐 Browser & Screen Reader Compatibility
Browser
Screen Reader
Status
🍎 Safari
VoiceOver
✓ Safe
🪟 Chrome
NVDA
✓ Safe
🪟 Edge
JAWS
✓ Safe
🦊 Firefox
NVDA
✓ Safe
📱 iOS Safari
VoiceOver
✓ Safe
🤖 Chrome Android
TalkBack
✓ Safe