Part 2: Adding role, checked state and accessible name

  • Adding role="checkbox" to make part of tab order of the page.
  • Adding aria-checked attribute.
  • Accessible name from text content.
  • Removing state character (e.g. ✗) from accessible name using aria-hidden.

Example

Part 2 on WebEdit

Pizza Toppings

HTML Source Code

CSS Source Code

Javascript Source Code