Radio
Radios allow users to select one option from a list.
import { ... } from '@ag.ds-next/react/radio';Learn more about how to meet WCAG success criteria when implementing radio buttons. This makes them accessible and inclusive for users of all abilities and situations.
The radio component passed accessibility testing in 2022 and 2024.
Clear and descriptive labels
Requirements
- Labels and hint text are clear and succinct.
- The purpose of the radio button is understood and conveyed by assistive technology.
Benefits
- Assistive technology users have equal access to labels and instructions.
- Improves understanding of available options.
- Helps all users avoid submitting an incomplete or incorrect form.
- Makes filling in forms easier for people with cognitive and learning disabilities.
- Radio button purpose is communicated to different assistive technologies.
- Clear labelling supports users with English as a second language.
WCAG references
- Understanding success criterion 1.3.5 Identify input purpose
- Understanding success criterion 2.4.6 Headings and labels
Name, role, value
Requirements
- All radio buttons have appropriate names, roles and values that are understood and conveyed by assistive technology.
- Clear label identifying the radio button.
- ARIA roles and states where needed – for example,
aria-checked,aria-required.
Benefits
- Assistive technology users have equal access to information on the purpose and state of the component.
- Improves usability for voice control software users.
- Helps users with cognitive challenges understand component functionality.
- Makes automation and testing more reliable.