Radio buttons

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.

• JAWS: [group label] [label] radio button checked | not checked [position and amount] [instruction on operation with the arrow keys]
• NVDA: [group label] grouping [label] radio button checked | not checked [position and amount]
• Windows Narrator: [label] radio button 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

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

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