Accessibility

Accessible radio button requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG guidelines

1.3.1 Info and Relationships

Organise and structure the form in a logical and predictable manner. Use proper markup to convey the hierarchy and relationships between form elements, such as fieldsets and legends for grouping related fields.

2.4.6 Headings and Labels

Provide clear and descriptive labels for form fields and headings for sections. This helps users understand the purpose of each field and the structure of the form.

2.1 Keyboard accessible

Ensure that radio buttons are navigable and selectable using the keyboard (tab and spacebar).

2.4.7 Focus Visible

Provide a visible focus indicator for radio buttons to help users with different input methods.

1.4.3 Contrast (Minimum)

Ensure that the colour contrast between the text labels and background meets WCAG 2.1 Level AA requirements.

3.3.1 Error Identification

Clearly identify and describe any errors that occur during form submission or input validation. Provide guidance on how to fix the errors.

3.3.2 Labels or Instructions

Clear and descriptive labels

Ensure that radio button labels are clear, concise, and provide enough context for screen reader users.

3.3.3 Error Suggestion

If an input error is automatically detected, provide suggestions for correcting the error, where possible.

3.3.4 Error Prevention (Legal, Financial, Data)

For forms that involve legal, financial, or sensitive data transactions, provide mechanisms to review and correct information before submission or allow users to confirm or reverse their actions.

4.1.2 Name, Role, Value

Use the relevant HTML to ensure the radios and group of radios have the correct Names, Roles, and Values.

In our examples we use the <fieldset> and <legend> elements to group our controls. The <fieldset> element provides a container for related form controls, and the <legend> element acts as a heading to identify the group.

When using this method it is not necessary to include aria roles and attributes.

ARIA roles and attributes

When it is not possible to use the HTML elements, ensure the correct ARIA Roles, States, and Properties are present.

If you are not using <fieldset> and <legend> use role="radiogroup" for the container and role="radio" for each radio button.

Use aria-labelledby to associate a visible label with the radio group and aria-describedby to provide additional information or instructions if needed.

Consult the Radio Pattern of ARIA Authoring Practices Guide for the full list of WAI-ARIA Roles, States, and Properties.