Part 4: Synchronization of ARIA and visual states

Using CSS attribute selectors and CSS content property to synchronize visual and aria states.
Use of CSS content property supports high contrast browser settings, unike the use of CSS background-image.

Example

Part 4 on WebEdit

Part 4: Custom Checkbox Widget with synchronization of ARIA and visual states

Pizza Toppings Green pepper Onion

Mushrooms

Spinach

HTML Source Code

CSS Source Code

Javascript Source Code