When you have related inputs – like a group of radio buttons for “Shipping Method” – users need to know they belong together.
- The <fieldset> and <legend>: This is the semantic “gold standard.” The fieldset wraps the group, and the legend provides the title. When a user tabs into the group, the screen reader announces the legend first.
- When to use role=”group”: If your layout makes using a native fieldset difficult (due to CSS limitations), you can use a <div> with role=”group” and aria-labelledby to achieve the same structural meaning.
- Why it matters: It prevents “context loss.” Without grouping, a user might hear “Standard Shipping” and “Express Shipping” without knowing those are options for the “Delivery Preference” question.