Designing Accessible Focus States and Reduced Motion Rules

Accessibility (a11y) should be baked into the foundational design tokens of an application, not bolted on at launch. Creating inclusive software requires thoughtful attention to keyboard navigation, visual focus states, and user motion preferences.

Focus ring system design

Visible focus indicators guide keyboard users across interactive elements without cluttering pointer-based interactions:

:focus-visible {
  outline: none;
  ring: 2px;
  ring-offset: 2px;
}

Keyboard navigation standards

• Ensure logical DOM focus ordering across custom modal dialogues and dropdowns.
• Always provide clear ESC key dismissal handlers for overlay elements.
• Never strip focus indicators without providing accessible high-contrast alternatives.

Respecting prefers-reduced-motion

Animations should dynamically degrade for users with vestibular disorders or motion sensitivity:

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}