Group related form fields with ARIA roles
role=group, or role=radiogroup for a set of radios, ties related controls together and the group carries its own accessible name. W3C lists ARIA17 as sufficient for 1.3.1 Info and Relationships, and as sufficient for 3.3.2 Labels or Instructions in combination with the general technique of providing descriptive labels. It exists because fieldset and legend are notoriously hard to style, and this gets the same relationship without the layout fight. There is a scoping rule that saves a lot of arguing. The group is needed where the individual labels do not describe the controls fully. Three inputs labeled Billing day, Billing month and Billing year need no group. Three labeled Day, Month and Year do.
How we find it in an audit
A group role with no accessible name is an automated find. Whether a group was needed at all is the judgment, and W3C's scoping rule is the one we apply. We read each control's own label and ask whether it stands alone, then tab through the set and listen for whether the shared question ever arrives.
How affected users experience it
Three inputs labeled Day, Month and Year, tabbed into one at a time, produce Day, edit. Day of what. The heading that said Date of birth is on screen above them and is not attached to anything. Grouped and named, the same field announces as Date of birth, Day, edit, and the question travels with every part of the answer.
Passes vs. fails
Passes
<div role="group" aria-labelledby="dob-cap">
<span id="dob-cap">Date of birth</span>
<input aria-label="Day"> <input aria-label="Month"> <input aria-label="Year">
</div>Fails
<p>Date of birth</p>
<input aria-label="Day"> <input aria-label="Month"> <input aria-label="Year">How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA global properties not used where prohibitedA tool can check this
- ARIA required context roleA tool can check this
- ARIA required owned elementsA tool can check this
- ARIA state or property is permittedA tool can check this
- Table header cell has assigned cellsA tool can check this
Other ways to satisfy this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- ARIA11sufficientAdd landmarks so users can skip around
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA13sufficientName repeated landmarks so they are distinguishable
- ARIA16sufficientName controls from visible text with aria-labelledby
- ARIA20sufficientMark leftover page areas with role=region
- ARIA24sufficientGive meaningful font icons role=img
This guide is our interpretation of W3C technique ARIA17: Using grouping roles to identify related form controls. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.