Always wrap radio groups (and checkboxes that share semantics) in a `<fieldset>` with a `<legend>`. Screen readers announce the legend before each option — without it, the choice is contextless.
HTML
<fieldset>
<legend>Shipping method</legend>
<label>
<input type="radio" name="shipping" value="standard" checked>
Standard (5–7 days, free)
</label>
<label>
<input type="radio" name="shipping" value="express">
Express (2–3 days, $9.99)
</label>
<label>
<input type="radio" name="shipping" value="overnight">
Overnight ($24.99)
</label>
</fieldset>
<fieldset>
<legend>Notifications</legend>
<label><input type="checkbox" name="notify[]" value="email" checked> Email</label>
<label><input type="checkbox" name="notify[]" value="sms"> SMS</label>
<label><input type="checkbox" name="notify[]" value="push"> Push</label>
</fieldset>
<style>
fieldset { border: 1px solid #d1d5db; padding: 12px 16px; border-radius: 8px; }
legend { padding: 0 6px; font-weight: 600; }
fieldset label { display: block; margin: 4px 0; cursor: pointer; }
</style>Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.