Developer What component has
Note that the Pills component can function as either a group of radio buttons or a group of tabs, depending on the use case. To select the desired behavior, use the behavior property (refer to the example).
Keyboard support
With behavior='auto' (default):
| Key | Function |
|---|---|
Tab | When focus moves to the Pills, it moves to the active Pills.Item. |
Left Arrow , Right Arrow | Set checked value to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively. |
With behavior='manual' :
| Key | Function |
|---|---|
Tab | When focus moves to the Pills, the active Pills.Item gets it. |
Left Arrow , Right Arrow | Moves focus to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively. |
Space/Enter | Change Pills.Item state to active. |
See detailed information about the keyboard support for the clickable elements in the Keyboard control guide.
Roles and attributes
| Role | Attribute | Element | Usage |
|---|---|---|---|
radiogroup | div | Used for Pills with behavior='auto'. Identifies the div element as a container for a group of radio buttons. Isn’t focusable because focus is managed using a roving tabindex strategy as described below. | |
radio | div | div | |
tablist | div | Used for Pills with behavior='manual'. Indicates that the element serves as a container for a set of tabs. | |
tab | button | Used for Pills with behavior='manual'. Indicates the element serves as a tab control. | |
tabIndex="0" | div | Makes the radio button focusable and includes it in the page Tab sequence. Set on only one radio in the radio group. On page load, is set on the first radio button in the radio group. Moves with focus inside the radio group so the most recently focused radio button is included in the page Tab sequence. This approach to managing focus is described in the section on roving tabindex. | |
tabindex="-1" | div | Makes the element focusable but not part of the page Tab sequence. Applied to all radio buttons contained in the radio group except for one that is included in the page Tab sequence. This approach to managing focus is described in the section on Roving tabindex. | |
aria-checked="true" | div | Identifies radio buttons which is checked. CSS attribute selectors (for example [aria-checked="true"] ) are used to synchronize the visual states with the value of the aria-checked attribute. | |
aria-checked="false" | div | Identifies radio buttons which are not checked. CSS attribute selectors (for example [aria-checked="false"] ) are used to synchronize the visual states with the value of the aria-checked attribute. |
Considerations for developers
- The
<fieldset>surrounds the entire grouping of checkboxes or radio buttons. The<legend>provides a description for the grouping. - Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive. This helps someone using assistive technology to understand the question they are answering with the group of radio buttons.
Find live examples in the A11y style guide.
Roles & attributes
The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.
| Attribute | Element | Usage |
|---|---|---|
aria-labelledby="[IDREF]" | div | Refers to the element that contains the label of the radio group. |
Resources
- W3 radio group examples has detailed information about the radio group accessible behavior.
- A11y style guide gives core recommendations for the accessible radio buttons.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "Like radio button, 1 of 3".
3. Screen reader goes to the next element.
4. Screen reader says "Don't care selected radio button, 2 of 3".
5. Screen reader goes to the next element.
6. Screen reader says "Dislike radio button, 3 of 3".
7. Screen reader triggers element default action.
8. Screen reader says "selected Dislike radio button, 3 of 3".
9. Screen reader goes to the previous element.
10. Screen reader says "Don't care radio button, 2 of 3".1. Screen reader goes into the active element.
2. Screen reader says "Like radio button, 1 of 3".
3. Screen reader goes to the next element.
4. Screen reader says "Don't care selected radio button, 2 of 3".
5. Screen reader goes to the next element.
6. Screen reader says "Dislike radio button, 3 of 3".
7. Screen reader triggers element default action.
8. Screen reader says "selected Dislike radio button, 3 of 3".
9. Screen reader goes to the previous element.
10. Screen reader says "Don't care radio button, 2 of 3".