MacOS Voiceover Safari
Use semantic HTML
- This semantic HTML contains all accessibility features by default.
Disabled and focusable radio inputs (preferred)
- An input using
aria-disabled="truewill be focusable with the tab key
- Use JS to preventDefault()
Required radio inputs
Ensuring all screenreaders indicate radio inputs as being required requires some aria and reinforcement.
aria-required="true"to indicate the group is required
aria-invalid="true/false"to indicate an error state
<fieldset>to make the
- Add “Required” as text to the
<legend>to ensure compliance across all platforms
Radio button cards
Delta (prounounced: dell-tah) is the fourth letter of the NATO alphabet.
Echo (prounounced: eck-oh) is the fifth letter of the NATO alphabet.
When you can’t use semantic HTML
This custom button requires extra scripting work for roving tabindex and event listeners.
Specialty use cases
Radio mixed with interactive elements
Avoid this pattern when possible! Radio groups are not supposed to consist of nested interactive elements. Radio button focus order is not what you may expect.
- By default, it is not expected behavior that each radio button can be tabbed to. This is how radio buttons naturally behave
- As soon as a radio button is selected, the selected radio input receives focus first from the group. As a result screen reader users may not discover a nested control for an option if they start switching between radio buttons alone
- To try to mitigate screen reader users not discovering the nested controls, describe the fieldset / radiogroup with non-visual text. This can be done with
fieldset. For example, “Edit controls are available which follow each radio button”
- Ensure the nested controls also have additional context defined by
aria-describedby. This will help screen reader users understand their purpose.
- Use of the same
nameattribute is important to link the radio buttons as a programmatic group
- Keyboard functionality such as arrow up/down/left/right should change the selected radio button.
labeltext must describe the radio input.
aria-describedby="hint-id"for hints or additional descriptions
aria-label="Radio input purpose"can also be used (as a last resort)
- By default, semantic HTML radio inputs identify as radio button
role="radio"for custom elements
- Semantic HTML
<fieldset>must wrap the radio group
<legend>must describe the group’s purpose
for="input-id"to be associated with its input
- Custom elements
role="radiogroup"to take the palace of fieldset
aria-labelledby="label-id"to associate an element as a label
aria-label="Group purpose"can also be used if there’s no label with an ID
- Semantic HTML
checked(will be read as “selected” by screen reader)
- Use the
disabledstate for inactive buttons
- Custom element
aria-checked="true/false"to express state
aria-disabled="true"to declare inactive elements
- Focus must be visible
- Custom elements will require keyboard event listeners and roving tabindex
- DO NOT put interactive elements inbetween radio inputs.
- Performs its purpose across platforms, devices and viewports