Simple Two-State `Checkbox` Example

Example of a simple two-state checkbox that implements the design pattern for checkbox.

Example

Label 1

Label 2

Label 3

div element with role="checkbox".
div element has onclick event to handle mouse clicks.
div element has onkeydown event to handle keyboard support.
div element has tabindex="0" to become part of tab order of the page.
img elements are used to visually indicate the state because using css techniqes or generated content result in visual state disappearing when browsers or operating systems are configured to display high contrast themes.
toggleCheckbox(event) uses aria-checked state to make sure the ARIA and visual state (e.g. img element) of the checkbox stay synchronizd.
focus blur events are used to provide visual styling of keyboard focus.

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

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)