ARIA Checkbox role
- Standard checkboxes are provided below for comparison only.
- ARIA Example
- Role of checkbox is used on span elements
- State of aria-checked is used to indicated checked state
- aria-labelledby is used to associate label with checkbox
ARIA Checkbox Example
Test results for ARIA Checkbox
| AT | Browser | Notes |
|---|---|---|
| JAWS | Internet Explorer | Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced. |
| JAWS | Firefox | Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced. |
| NVDA | Internet Explorer | Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced. |
| NVDA | firefox | Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced. |
| VoiceOver IOS | Safari | Works as expected, The name State and Role are announced when the Checkbox is activated the new State is announced. |
| Talkback | Firefox | Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is not announced. (note this is the same behavior for HTML checkboxes) |
| Talkback | Chrome | Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is announced.
//start here |
| Voiceover Mac OS | Safari | Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is announced. |
