Synonyms: Option fields, selection button, radio button group

See also: Selection lists , drop-down lists , check boxes

Radio buttons are used for selecting mutually exclusive options (see DIN EN ISO 9241-161: 8.33).

A radio button consists of an indicator which indicates whether the option is selected or not selected. A radio button group consists of several radio buttons with their labels and a group label. Radio buttons must be grouped.

Figure 52: Radio buttons in a group
No.PropertyDescriptionClassificationReference
782ContrastThe border of the radio button must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
783ContrastThe symbol which relays the status (circle) must have a contrast ratio of at least 3:1 with respect to the neighboring color.MustEN 301 549: 9.1.4.11, 11.1.4.11
784LabelThe radio buttons must have a visible label (see LabelGroupFocus indicator
No.PropertyDescriptionClassificationReference
788Use of the keyboardIt must be possible to access, operate and exit the radio buttons with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.25
789UpdatesWhen focusing and operating the radio buttons, no unexpected change of contextUse of the pointing deviceUse of the pointing device

Use of the keyboard: radio buttons

Permalink "Use of the keyboard: radio buttons"
ActionKeyClassification
Focusing of the radio button groupTAB

Note: The selected radio button receives the focus. If no radio button is selected, the first radio button receives the focus.

Required
Exiting the radio button groupTABRequired
Selecting a radio buttonSPACERequired
Operation of the radio button group (selecting a radio button)UP/DOWN RIGHT/LEFT ARROW

Note: In this context, the navigation must be limited to the radio button group.

Required
Navigation within the radio button group (without changing the selection)CTRL + UP/DOWN RIGHT/LEFT ARROWRecommended

Use of the pointing device: radio buttons

Permalink "Use of the pointing device: radio buttons"
ActionKeyClassification
Selecting a radio buttonLeft clickRequired
No.PropertyDescriptionClassificationReference
791RoleThe radio button role must be communicated to the Accessibility API (see Accessibility APIElement statusGroupFocus indicator

Practical tip: radio buttons in Web applications

Permalink "Practical tip: radio buttons in Web applications"
  • JAWS: [group label] [label] selection button enabled | not enabled [position and amount] [instruction on operation with the arrow keys]
  • NVDA: [group label] grouping [label] selection button enabled | not enabled [position and amount]
  • Windows Narrator: [label] option field selected | not selected [position and amount]

The radio button group should be marked with the HTML element <fieldset> and labeled with the <legend> element.

The radio buttons should be implemented with the HTML element <input type=radio> . Radio buttons that belong to the same group must have the same value in the name attribute and may not be located in different <form> elements.

The initially selected status is set with the checked attribute. An initial radio button should be selected in each radio button group, as keyboard users automatically make a selection when navigating through the radio buttons which cannot be undone. The radio button should be initially selected which is either most likely to be selected or which contains a neutral option (e.g. “not applicable”).

The label should be linked to the respective radio button using the <label for=ID> element in order to expand the click area of the radio button by its label.

A radio button and the radio button group can be marked as disabled (disabled), but not as read-only (readonly).

If a radio button is marked as a required field with required, this applies to the entire radio button group, i.e. if any radio button was selected, this is sufficient for submitting the form. To ensure that the required field label is perceptible with the assistive technology on all radio buttons, using the required attribute on all radio buttons, or alternatively, adding a required text field reference (e.g. an asterisk) in the group label (<legend>) is recommended. If a radio button is initially preselected with the checked attribute, no required field label is required.

Error messages should not be associated with each individual radio button, but with the group.

Further information: 4.10.5.1.16 Radio Button state (type=radio) - HTML Standard (whatwg.org)

If the radio button group is not implemented with the HTML element, it is also necessary to take account of the following:

  • The radio buttons are located in an element which is marked with role=radiogroup.
  • The radio button group can be labeled with aria-labelledby or aria-label.
  • The role of the radio buttons is communicated with role=radio.
  • The status is communicated with aria-checked=true|false and must be updated during operation.
  • The labeling of the radio buttons can take place using text content or aria-labelledby.
  • The radio button group can be marked as read-only with aria-readonly. The radio buttons cannot be marked as read-only.
  • In contrast to HTML, aria-required is not used to mark the radio buttons as a required input, but the radio button group (role=radiogroup).
  • The presentation of the radio buttons should be verified in Windows High Contrast mode.
  • The visible radio buttons and the programmatically focused elements should have the same position and size.

Further information: radio role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), radiogroup role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Radio Group Pattern | APG | WAI | W3C, Checkbox Pattern | APG | WAI | W3C

Information about this article

You are welcome to send feedback by email about our handout!