Radio buttons customized using ARIA

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interaction.
• Note.
• Examples of components.

Principle

Radio buttons are form elements that are used to select a single option out of a group of possible options.

Radio buttons are “customized” when they are not built using the standard HTML code for radio buttons, 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.

Core HTML base

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

ARIA roles, states and properties

• role="radiogroup" must be placed on the radio button group.
• role="radio" must be placed on the container of each radio button.
• The tabindex attribute must be placed by default on the container of each radio button, and its value set dynamically according to the state of the radio buttons:
  • If no button is selected: tabindex="0" on the first and last radio button of the group and tabindex="-1" on the other radio buttons.
  • If one radio button is selected: tabindex="0" on the selected button, tabindex="-1" on the other radio buttons.
• aria-hidden="true" must be placed on each image simulating a radio button.
• The aria-checked attribute must be placed on the container of each radio button. Its value must be set dynamically according to the state of the associated radio button:
  • aria-checked="true" when the radio button is selected.
  • aria-checked="false" when the radio button is not selected.
• The group of radio buttons must be attached to the label of the group using the aria-labelledby attribute:
  • The label of the group must have a unique id value.
  • The radio button group must have an aria-labelledby attribute marked up with the value of the id attribute of the group label.

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 when the radio buttons group is opened from the keyboard, the keyboard is focused:

• On the first radio button in the group if the Tab key was pressed.
• On the last radio button if the Maj + Tab key combination was pressed.

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 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 selects 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 must 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>.

Components

Comments

Back to top