< Back to Guides | Learn more at PaulJAdam.com >

Grouping Controls - Accessibility Quick Guide

Groups of related form controls have to be grouped semantically for screen reader users to understand the visible grouping relationship presented on screen. HTML fieldset and legend grouping is the most robust technique for accessibility.

When a screen reader user tabs into an input inside the fieldset then the legend text will be spoken automatically and they will hear the name of the specific group they are editing.

Guidance

Groups of checkboxes, radio buttons, and related inputs must be in a fieldset and their group title text must be the legend.
Groups of inputs using the same label text (e.g. Shipping and Billing Address) must be semantically grouped using fieldset and legend.

Bad Example

Please select your preferred contact method:

Email Phone Mail

Shipping Address
Name
Street Address
City
State
Zip Code

Billing Address
Name
Street Address
City
State
Zip Code

Filter Results by: In Stock Items Store Pickup Free Shipping

Good Example

Please select your preferred contact method:

Email Phone Mail

Shipping Address Name
Street Address
City
State
Zip Code

Billing Address Name
Street Address
City
State
Zip Code

Filter Results by: In Stock Items Store Pickup Free Shipping