ARIA Checkbox role

From Level Access Web Labs
Jump to: navigation, 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:




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. When navigating with the TAB key the labels for the aria checkboxes such as option a are announced twice.
VoiceOver 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.