Widget: Radio

Example

A radiogroup wrapped in a fieldset.

Details

Implementing This Widget

Implementing the Radio widget is done when you want to provide an accessible radio option button group on your web page or in your web application.

Prerequisites:

Before you begin, be sure you have a group label, a list of button option values, and the function you want called when the value changes.

To implement the Radio widget:

Call deque.createRadioGroup with the following three arguments:

  1. A config object with two fields, label and useHTML5
  2. Your list of button values (just strings)
  3. A function that you want called every time the value changes

This will return a div element that contains your radio buttons as children.

Expected Operation and Accessibility Features

The Radio widget must provide a radio button option group that can be tabbed to, focused and activated with a keyboard, and have its state communicated to assistive technologies and made visible to those using high contrast browser or operating system settings.

Validation and Developer Notes

In order to validate this control, you must manually ensure the Tab key moves keyboard focus to the radiogroup, and that the Arrow keys move up and down the radio options. A div must be identified as a container for radio button options which must have an accessible label name, and the checked or unchecked state of each radio option must be communicated properly by screen readers.

Notes for the Developer:

Your list of button option values should be just strings. This example is a radiogroup wrapped in a fieldset.

Example Implementation Reference

To view an implementation of this widget, see Radio widget example.