Accessible Listbox with Visible Focus and Active States
Explore how to implement accessible, visually distinct listbox options with strong focus and selected states using CSS. This lesson guides you through applying focus rings and active item styles that meet ARIA accessibility standards, all without modifying HTML or using JavaScript.
We'll cover the following...
We'll cover the following...
Problem description
You are given a listbox widget using a container with the class listbox and a set of div elements with the class listbox-option. Each option may be selected (with aria-selected="true") or not. Focusable options have tabindex="0" ...