Radio buttons simulated using ARIA

Summary

Principle

Radio buttons are form elements that allow the user to select one unique option among a group of proposed options.

Radio buttons are “simulated using ARIA” when they are not built using the standard HTML code for radio buttons as found in the specification <input type="radio" />.

By following the recommendations below the default behavior of standard HTML radio buttons can be reproduced in situations where the standard HTML code for radio buttons cannot be used.

This code is based on the “Radio Group” design pattern found in WAI-ARIA 1.1 Authoring Practices of the W3C.

Core HTML base

<p id="question">Question</p>
<ul aria-labelledby="question" role="radiogroup">
  <li role="radio" aria-checked="false" tabindex="-1">
    <img aria-hidden="true" src="radio.svg" alt="Not selected:" />
	Choice 1
  </li>
  <li role="radio" aria-checked="true" tabindex="0">
    <img aria-hidden="true" src="radio-checked.svg" alt="Selected:" />
	Choice 2
  </li>
  <li role="radio" aria-checked="false" tabindex="-1">
    <img aria-hidden="true" src="radio.svg" alt="Not selected:" />
	Choice 3
  </li>
</ul>

ARIA roles, states and properties

Keyboard interaction

Keyboard interactions are the same as for standard radio buttons in HTML. The only difference is that keyboard focus is placed on the container of the radio button and not only on the radio button.

Tab and Shift + Tab

When the user enters a group of radio buttons by pressing the Tab key, the focus moves to the selected radio button in the group. When the focus is on a selected radio button, the next tab allows the user to leave the group of radio buttons.

If no radio button is selected, keyboard is focused:

Up arrow and Left arrow

When the focus is on one of the radio buttons, each of these arrows moves the focus to the previous radio button in the group and selects that radio button. If the focus is on the first radio button of the group and one of these arrows is pressed, then the keyboard focus is moves to the last radio button in the group and selects it.

Down arrow et Right arrow

When the focus is on one of the radio buttons, each of these arrows moves the focus to the next radio button in the group and selects that radio button. If the focus is on the last radio button of the group and one of these arrows is pressed, then the keyboard focus moves to the first radio button in the group and selectes it.

Spacebar

When the keyboard focus is on a radio button, the spacebar selects that radio button and deselects the other radio button which had previously been selected in the group.

Note

The image source and its alternative text should be modified to correspond to the state of the associated button.

Note that the <img /> tag is provided in the example of code above, but it could be replaced with a Scalable Vector image <svg>.

Examples of components

The following components are proposed here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.

Comments

Add a comment

Required fields are marked *.

Back to top