ARIA Checkbox role

From Level Access Web Labs
(Redirected from Checkbox ARIA)
Jump to navigation Jump to search
  • 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

ARIA Checkbox Example

Standard HTML Checkboxes

Standard checkbox elements using HTML <input> and <label> tags:




ARIA Checkboxes

Checkboxes using ARIA and JavaScript:




Remember me on this site.

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.