Standard HTML and ARIA Checkbox examples

The following are examples of standard checkboxes built with HTML as well as simulated checkboxes built with ARIA

Concepts included in the ARIA checkboxes include:

The tabindex="0" attribute has been added as the checkboxes are built with a <span> elements which do not receive keyboard focus by default.

Note: Positive tabindex attributes should not be used as it makes it difficult to ensure a consistent focus order as page content is changed and can cause issues for users navigating using a keyboard. It is recommended to only use a value of 0 for tabindex attributes and to ensure content is ordered logically in the DOM.

Once the control rececives focus, it must still provide a role to ensure users can identify its intended function. The ARIA checkbox role has been added to the <span> to convey the element's role.
To convey an accessible name for the simulated checkboxes, the aria-labelledby property has been applied to them and references the ID of the text beside them which is visually labelling them.
Checkboxes can exist in both a checked and unchecked state. The aria-checked state has been applied to the checkboxes to indicate their state. When interacting with the controls, their programmatic state is updated via this value.
In addition to the programmatic state, the visual state of the simulated controls is updated as well. These are rendered via images (often done to ensure the same visual presentation across browsers) and the source of the images are updated when activating the simulated checkboxes to reflect their state visually.
The JavaScript onClick event has been applied to the simulated checkboxes which supports mouse interaction. This event supports keyboard input via the Enter key on controls such as native HTML buttons and links however is not supported on simulated controls. For this reason, the JavaScript onKeyUp event has been applied to the simulated controls as well to support keyboard input. This listens for Event Code 32 as that is the code for a Space Bar press, which is the expected behavior of native HTML checkboxes.