ARIA Checkbox role

From Level Access Web Labs
Revision as of 18:20, 10 October 2018 by Rmccaffery (talk | contribs)
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:




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. The Group name is also announced when navigating with the ARROW keys in Virtual cursor mode. The Group name is also announced when navigating with the TAB key.
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. The Group name is also announced when navigating with the ARROW keys in Virtual cursor mode. The Group name is also announced when navigating with the TAB key.
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. The Group name is not announced when navigating with the TAB key. It is announced when navigating in Browse mode.
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. The Group name is not announced when navigating with the TAB key. It is announced when navigating in Browse mode.
VoiceOver Safari Works as expected, The name State and Role are announced when the Checkbox is activated the new State is announced. The group name is announced when navigating to it.
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) The group name is announced when navigating to the group.
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. The group name is not announced.