The Accessible Interaction States Pattern

The Accessible Interaction States pattern is all about making sure our UI responds clearly and inclusively to user interactions—whether that’s hover, focus, active, disabled, or ARIA-driven state changes. This also helps ensure that users can clearly perceive and navigate through an interface, regardless of their input method or abilities. By providing visible focus styles, hover feedback, active cues, and disabled states, we make interactions understandable and inclusive, especially for keyboard users and screen reader users.

How the pattern works

This pattern uses pseudo-classes like :hover, :focus, :active, and :disabled to define distinct styles for various interaction states. The :focus-visible selector improves accessibility by limiting focus outlines to keyboard interactions. Visual cues like outlines, shadows, or background changes provide feedback that an element is interactive or currently selected.