Radio Button Example

This example implements the features of the Radio Button Design Pattern for selecting a pizza crust and delivery method.

Similar examples include:

Radio Button Example (aria-activedescendant): Radio button group using aria-activedescendant for managing keyboard focus.

Example Start

Pizza Crust

Regular crust

Deep dish

Thin crust

Pizza Delivery

Pickup

Home Delivery

Dine in

Radio group Widget Implementation Information

Implementation Notes

Uses CSS attribute selectors for synchronizing aria-checked state with the visual state indicator.
Uses CSS :hover and :focus psuedo selectors for styling visual keyboard focus and hover.

Keyboard Support

Key	Function
`Tab`	Moves keyboard focus to the checked `radio` button in a `radiogroup`. If no `radio` button is checked, focus moves to the first `radio` button in the group.
`Space`	If the `radio` button with focus is unchecked, it's state will be changed to checked.
`Down arrow`	Moves focus to next `radio` button in the group. If focus is on the last `radio` button in the group, move focus to the first `radio` button.
`Up arrow`	Moves focus to previous `radio` button in the group. If focus is on the first `radio` button in the group, move focus to the last `radio` button.

ARIA Roles, Properties and States

Role	Attributes	Element	Usage
`radiogroup`		`div`	The `role="radiogroup"` attribute identifies the `div` element as a container for a group of `radio` buttons. The descendent `radio` buttons are considered part of the group. The accessible name comes the `aria-labelledby` attribute, which points to the element that contains the label text. The `radiogroup` widget does not need a `tabindex` value, since the `ul[role"radiogroup"]` element never receives keyboard focus.
	`aria-labelledby="[IDREF]"`	`div`	The `aria-labelledby` attribute points to the element that contains the test for defining an accessible name (e.g. label) for the group of `radio` buttons.
`radio`		`div`	The `role="radio"` attribute identifies the `div` element as an ARIA `radio` button. The accessible name comes the child text content of the `div` element. The `radio` widget has a manged `tabindex` value, one radio button must have a `tabindex="0"` and the rest of the daio buttons in the group a `tabindex="-1"`. See roving tabindex for more information
	`tabindex="-1"`	`div`	All `radio` buttons in a group that are unchecked, except for the first `radio` button in the case when no `radio` buttons are checked. See roving tabindex for more information
	`tabindex="0"`	`div`	The `radio` button that is checked, or if no `radio` button is checked the first `radio` button in the radio group. See roving tabindex for more information
	`aria-checked="false"`	`div`	Indentifies the `radio` button is not checked. CSS attribute selectors (e.g. `[aria-checked="false"]`) are used to synchornize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property is used to indcate visual state of unchecked to support high contrast setting in operating systems and browsers.
	`aria-checked="true"`	`div`	Indentifies the `radio` button is checked. CSS attribute selectors (e.g. `[aria-checked="true"]`) are used to synchornize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property is used to indcate visual state of checked to support high contrast setting in operating systems and browsers.

Javascript and CSS Source Code

CSS: radio.css
Javascript: radioGroup.js
Javascript: radioButton.js

HTML Source Code


  <div role="radiogroup"
     aria-labelledby="group_label_1"
     id="rg1">
    <h3 id="group_label_1">
      Pizza Crust
    </h3>
    <div role="radio"
       aria-checked="false"
       tabindex="0">
      
              Regular crust
           
    </div>
    <div role="radio"
       aria-checked="false"
       tabindex="-1">
      
              Deep dish
           
    </div>
    <div role="radio"
       aria-checked="false"
       tabindex="-1">
      
              Thin crust
           
    </div>
  </div>
  <div role="radiogroup"
     aria-labelledby="group_label_2"
     id="rg2">
    <h3 id="group_label_2">
      Pizza Delivery
    </h3>
    <div role="radio"
       aria-checked="false"
       tabindex="0">
      
              Pickup
            
    </div>
    <div role="radio"
       aria-checked="false"
       tabindex="-1">
      
              Home Delivery
            
    </div>
    <div role="radio"
       aria-checked="false"
       tabindex="-1">
      
            Dine in
           
    </div>
  </div>
  <script type="text/javascript">
    
          var rg1 = new RadioGroup(document.getElementById('rg1'));
          rg1.init();
          var rg2 = new RadioGroup(document.getElementById('rg2'));
          rg2.init();
        
  </script>