Components
Radio
A Radio is an option the user can select. Use multiple radio to show a list of options. Users can switch between the options, but can only select one.
What you need to check
Groups of choices must have a descriptive legend.
The legend, description, and error messages must be connected to the group so that they are available to assistive technologies.
You can use Fieldset to connect the legend, description, and error messages.
The field must have a clear accessible name that matches the visible label.
The accessible name must contain the visible text that describes the field. This allows users of speech recognition and screen readers to refer to the field using the same name shown on screen.
Required fields must be clearly marked.
Users must easily understand which fields must be filled in. Follow the pattern for required and optional form fields.
Error messages must be clearly linked to the correct field and explain how to fix the error.
The error message must make it clear which field contains an error, what is wrong, and how the user can fix it. Avoid generic messages such as “Error” or “Invalid value”. Use specific messages instead, for example “The email address must contain @”.
See the pattern for user-triggered error messages for recommendations on when and how error messages should be shown.
WCAG: 3.3.1 Error Identification (W3C) and 3.3.3 Error Suggestion (W3C)
Test with a Keyboard
Note that the Radio component uses the arrow keys to select options, not the Tab key.
Verify that you can
- reach the first radio button in the group using Tab
- identify which option is selected when focus enters the group
- select the focused option using Space
- move to the previous option using ↑ or ←
- move to the next option using ↓ or →
- leave the group using Tab