CodePark/ questions / Forms & errors
START PRACTICINGPRACTICE
Frontend question · Accessibility › Forms & errors

A checkout form has a "Delivery speed" question with three radio buttons: Standard, Express, Next day. How should the question text be tied to the group?

Wrap the radios in a <fieldset>, with the question in its <legend>

<fieldset> groups related controls, and <legend> gives the group its name. A screen reader announces "Delivery speed, group" and then each option, such as "Express, radio button, 2 of 3". Each radio still has its own <label>.

"Put the question in an h3" is the tempting wrong answer. It looks right, but it isn't linked to the radios. A user tabbing into the group may never hear it. Giving every radio
aria-label="Delivery speed" is worse: it replaces each option's own name, so all three sound the same.