Skip to content

Radio Group Example Using Roving tabindex

Radio Group Example Using Roving tabindex

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

This example implements the features of the Radio Group Pattern for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method. This implementation uses a roving tabindex for managing focus within the radio group.

Similar examples include:

Example

Pizza Crust

Regular crust
Deep dish
Thin crust

Pizza Delivery

Pickup
Home Delivery
Dine in

Accessibility Features

  • Uses CSS attribute selectors for synchronizing aria-checked state with the visual state indicator.
  • Uses CSS :hover and :focus pseudo-classes for styling visual keyboard focus and hover.
    • The focus indicator encompasses both the radio button and label, making it easier to perceive which option is being chosen.
    • Hover changes background of both the radio button and label, making it easier to perceive that clicking either the label or button will activate the radio button.
    • The cursor is changed to a pointer when hovering over the radio button to help people with visual impairments identify it as an interactive element.
  • Because transparent borders are visible on some systems with high contrast enabled, only the focused element has a visible border. When focusable elements are not focused, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
  • To ensure the inline SVG radio button graphics in the CSS file have sufficient contrast with the background when high contrast settings change the color of text content, CSS forced-color-adjust is set to auto on the svg graphics. This causes the colors of the stroke and fill of the circle elements to be overridden by the high contrast color setting. To make the background of the circle elements match the high contrast background color, the fill-opacity attribute of the outer circle is set to zero and the stroke-opacity attribute of the inner circle is set to zero. If forced-color-adjust were not used to override the colors specified for the stroke and fill properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the radio circle elements and the background or even make them invisible if their color matched the high contrast mode background.
    Note: The explicit setting of forced-color-adjust is necessary because some browsers do not use auto as the default value for SVG graphics.

Keyboard Support

Key Function
Tab
  • Moves focus to the checked radio button in the radiogroup.
  • If a radio button is not checked, focus moves to the first radio button in the group.
Space
  • If the radio button with focus is not checked, changes the state to checked.
  • Otherwise, does nothing.
  • Note: The state where a radio is not checked only occurs on page load.
Down arrow
Right arrow
  • Moves focus to and checks the next radio button in the group.
  • If focus is on the last radio button, moves focus to the first radio button.
  • The state of the previously checked radio button is changed to unchecked.
Up arrow
Left arrow
  • Moves focus to and checks the previous radio button in the group.
  • If focus is on the first radio button, moves focus to and checks the last radio button.
  • The state of the previously checked radio button is changed to unchecked.

Role, Property, State, and Tabindex Attributes

Role Attributes Element Usage
radiogroup div
  • Identifies the div element as a container for a group of radio buttons.
  • Is not focusable because focus is managed using a roving tabindex strategy as described below.
aria-labelledby="[IDREF]" div Refers to the element that contains the label of the radio group.
radio div
  • Identifies the div element as an ARIA radio button.
  • The accessible name is computed from the child text content of the div element.
tabindex="-1" div
  • Makes the element focusable but not part of the page Tab sequence.
  • Applied to all radio buttons contained in the radio group except for one that is included in the page Tab sequence.
  • This approach to managing focus is described in the practice for Managing Focus Within Components Using a Roving tabindex.
tabindex="0" div
  • Makes the radio button focusable and includes it in the page Tab sequence.
  • Set on only one radio in the radio group.
  • On page load, is set on the first radio button in the radio group.
  • Moves with focus inside the radio group so the most recently focused radio button is included in the page Tab sequence.
  • This approach to managing focus is described in the practice for Managing Focus Within Components Using a Roving tabindex.
aria-checked="false" div
  • Identifies radio buttons which are not checked.
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS ::before pseudo-element is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers.
aria-checked="true" div
  • Identifies the radio button which is checked.
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS ::before pseudo-element is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers.

JavaScript and CSS Source Code

HTML Source Code

To copy the following HTML code, please open it in CodePen.

Back to Top