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

HTML Source Code

CSS Source Code

Javascript Source Code