CSS Accessibility Focus States
Accessible Interactive States
Keyboard navigation, focus indicators, reduced motion.
Focus Management
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Accessibility Features
- focus-visible (mouse vs keyboard)
- prefers-reduced-motion
- prefers-color-scheme (dark/light)
- forced-colors media query