• Success Criterion 3.3.2
  • Conformance level A

Radio Button Group Missing Its Question or Prompt Text

3.3.2 — Labels or Instructions

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Group prompts missing: radio set with options but no question text.

Example 

<div role="radiogroup">
  <input type="radio" name="spice" id="mild"><label for="mild">Mild</label>
  <input type="radio" name="spice" id="hot"><label for="hot">Hot</label>
</div>
<!-- no legend or heading asking 'Choose your spice level' -->

Why it matters

A screen reader user hears 'Mild, radio button' and 'Hot, radio button' with no idea what question they're answering.

How to test

Look at a radio/checkbox group: if the options are listed with no question or prompt text identifying what they're choosing between, it fails.

How to fix

Wrap every radio or checkbox group needing a shared question in a fieldset with a legend.

<fieldset>
  <legend>Choose your spice level</legend>
  <input type="radio" name="spice" id="mild"><label for="mild">Mild</label>
  <input type="radio" name="spice" id="hot"><label for="hot">Hot</label>
</fieldset>

Outcome

A diner picks a spice level with full confidence in what they're choosing, screen reader or not.

Who is affected

Screen reader users who need the group's question announced before or with each option, not implied by nearby visual text.

Learn more

Related scenarios