Example Widget: Accessible Custom Checkbox Widget using ARIA

Features

  • Responds to mouse events using onClick event.
  • Responds to space keyboard event using onKeyDown event.
  • tabindex=0 makes widget keyboard focusable and include in tab order of page.
  • role="checkbox" identifies widget to assistive technologies as a "checkbox".
  • aria-checked attribute identifies the state as being "checked" or "unchecked".
  • Accessible name comes from child text content of the div[role="checkbox"] element.
  • aria-hidden attribute hides the characters used for indicating state (i.e. ✗ and ✓) from being included in the accessible name calculation.
  • CSS attribute selectors are used to keep the visual indication of checked state snychronized with accessibility API.
  • onFocus and onBlur event handlers are used on standard checkboxes to provide visual indication of keyboard focus.

Example

Checkbox example on WebEdit

Pizza Toppings
Mushrooms
Spinach

HTML Source Code

CSS Source Code

Javascript Source Code