Radio Button

Radio buttons are UI elements that select one option from a list of mutually exclusive options.

Accessibility

 

Keyboard


Key

Interaction

Tab

Tabbing into a group of radio buttons places the focus on the first radio button selected. If none of the radio buttons are selected, the focus is set on the first one in the group.

Space

Select the radio button in focus (if not already selected).

Left, right, Up, Down Arrows

Moves focus and selection to the previous or next radio button in the group (last becomes first, and first becomes last). The new radio button in focus gets selected even if the previous one was not.

 

Design Checklist


Ref to 23:4917

 

Accessible use of color

Color is not used as the only visual means of conveying information and meets a minimum of Level AA WCAG standards.

Ref to 23:4917

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and 3:1 for large text.

Ref to 23:4917

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1.

Ref to 23:4917

Keyboard interactions

It follows WCAG standards for keyboard accessibility guidelines and includes a description of keyboard interactions.