ARIA Checkbox

Simple Checkbox

Authoring Practice Design Patten for Checkbox

Simple Checkbox Example

Label 1
Label 2
Label 3

Accessibility Feature

Keyboard Support

Key Function
Tab Moves keyboard focus to checkbox.
Space Toggle the checkbox option either true or false. False is the default.

ARIA Roles, Properties and States

Role Property/State Usage
checkbox Identify div as Checkbox widget.
aria-checked Indicate state of checkbox:
  • Checked (e.g. aria-checked=true)
  • Unchecked (e.g. aria-checked=false)

Source Code