Radio
Radio buttons give customers the ability to make a single selection from a group of two or more mutually exclusive options.
On this page
Use Cases
Users should be able to:
- Use radio to perform only one selection from predefined list
- Navigate and interact with radio component leveraging assistive technology
- Receive appropriate feedback based on input type documented under interactive style
Interaction and Style
Relevant WCAG Requirements
Info and Relationships
Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.
WCAG 2.1 Understanding 1.3.1Focus Order
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
WCAG 2.1 Understanding 2.4.3Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focuses on the selected radio button. |
| Arrow Keys | Navigates between radio options in the group. |
| Spacebar | Selects the focused radio option. |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.