Checkbox Example: Adding ARIA 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 Green pepper Onion

Mushrooms

Spinach

HTML Source Code

CSS Source Code

Javascript Source Code