Accessibility
- The radio buttons are contained in or owned by an element with role
radiogroup.
- Each radio button element has role
radio.
- If a radio button is selected, the
radio element has aria-checked set to true. If it is not selected, it has aria-checked set to false.
- Each
radio element is labelled by its content, has a visible label referenced by aria-labelledby, or has a label specified with aria-label.
- The
radiogroup element has a visible label referenced by aria-labelledby or has a label specified with aria-label.
- If elements providing additional information about either the radio group or each radio button are present, those elements are referenced by the
radiogroup element or radio elements with the aria-describedby property.
- Right and left arrow keys and up and down arrow keys move focus sequentially between radio button in the group. Once the focus comes to the first or last radio buttons in the group, it cycles again.
- If the focused radio button is not selected, Space key deselects the currently selected radio button and selects the focused radio button. It the focused radio button is selected, pressing the Space key does nothing.
Further Reading
