iOS Voiceover Safari
Android Talkback Chrome
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.
Speciality use cases
Radio with interactive elements
When a UI calls for interactive elements inbetween radio buttons, this can be very difficult.
- Radio button focus order is not what you think it is.
- When nothing is selected, tab order moves through as expected.
- However, as soon as a radio button is selected, the selected radio input receives focus first from the group.
This hack must be used very carefully on a case by case basis.
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