iOS Voiceover Safari
Android Talkback Chrome
MacOS Voiceover Safari
Use semantic HTML
This semantic HTML contains all accessibility features by default.
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 should 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>should wrap the radio group
<legend>should 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.