The recurring failure: models give me pretty hover effects that vanish for keyboard users, remove the focus outline "because it's ugly", or convey state with color alone. I got tired of fixing the same three things.
So I wrote an accessibility-first interaction prompt with an explicit banned list and a requirement that every hover has a matching :focus-visible treatment. It also forces a non-color state cue and a reduced-motion branch. The outputs finally pass an axe scan on the first try.
Sharing it. Would love additions from folks who test with actual screen readers, not just automated tools.
Style interactive elements (links, buttons, a card) with hover/focus states that are accessible by default. Requirements:
- Every `:hover` effect has an equivalent `:focus-visible` effect. Never style hover alone.
- Keep a visible focus indicator: `:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }`. NEVER `outline: none` without an equally visible replacement.
- State must not rely on color alone: pair color changes with an underline, weight, icon, or transform so it survives grayscale.
- Transitions: only `transform`, `opacity`, `background-color`, `color`, `outline-color`; duration 120-180ms; easing `cubic-bezier(0.2, 0, 0, 1)`. No transitions on `all`.
- Hit target minimum 44x44px for touch.
- Wrap motion in `@media (prefers-reduced-motion: reduce)` to disable transforms/transitions but KEEP the color/underline state change.
Banned patterns: `outline: none` alone, `:hover`-only styling, color-only state, `transition: all`, removing underlines from links without another affordance.
Output CSS with a one-line comment above each rule saying which requirement it satisfies.