Checkbox Example (Two State)

This example implements the Checkbox Design Pattern for a two state checkbox using div elements.

Similar examples include:

Checkbox (Mixed State): Mixed state checkbox controlling standard input checkboxes.

Example

Sandwich Condiments

Lettuce

Tomato

Mustard

Sprouts

Keyboard Support

Key	Function
`Tab`	Moves keyboard focus to the `checkbox`.
`Space`, or `Enter`	Toggle check checkbox between checked and unchecked.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`checkbox`		`div`	The `role="checkbox"` attribute identifies the `div` element as a ARIA `checkbox`. The accessible name comes the child text content of the `div[role="checkbox"]` element. The `checkbox` widget needs a `tabindex="0"` value.
	`tabindex="0"`	`div`	The `div["checkbox"]` is identified as an ineractive element and is added to the tab order of the page by setting the `tabindex="0"`.
	`aria-checked="false"`	`div`	Indentifies the `checkbox` button as unchecked. CSS attribute selectors (e.g. `[aria-checked="false"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property are used to indcate visual state of "unchecked" to support high contrast setting in operating systems and browsers.
	`aria-checked="true"`	`div`	Indentifies the `checkbox` as checked. CSS attribute selectors (e.g. `[aria-checked="true"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property are used to indcate visual state of "checked" to support high contrast setting in operating systems and browsers.

Javascript and CSS Source Code

CSS: checkbox.css
Javascript: checkbox.js

HTML Source Code

Simple Two-State Checkbox Example