Building a checkbox from a span

Remember to always use an actual html checkbox , unless it is absolutely impossible.

You can see from this example that it takes quite a bit of work to create a fake checkbox.

How do we turn a <span> into a checkbox?

To do this we need to simulate a number of things:

• An accessible name: Comes from the content of the span tag
• A visual state indicator: using CSS classes checked and notChecked
• A programatic state indicator: using aria-checked true or false
• A keyboard stop: adding tabindex="0" to the span
• A way to check and uncheck the checkbox using the spacebar on the keyboard or using the mouse: See Javascript

Keyboard accessibility and screen readers.

The NVDA and Jaws screen readers both fire the "onclick" event (instead of the onkeydown event) when user is in browse mode.

When the NVDA/Jaws user is interacting with the page using "forms" mode or "application mode", the screen reader fires the onkeydown event.

When you are coding custom checkboxes and radiobuttons; controls that screen reader users can activate without leaving browse mode; make sure that you code the onclick event to execute the same function as the onkeydown functionality.

The checkbox

Removing the click activation

If you wish to test how screen readers interact with the checkbox when the click event is disabled you can Remove the onclick activation