frontend-accessibility-best-practices

This skill provides a comprehensive suite of accessibility (a11y) guidelines tailored for modern React development. It assists developers in implementing inclusive interfaces that adhere to the Web Content Accessibility Guidelines (WCAG) standards. The skill covers a broad spectrum of requirements, ranging from fundamental semantic HTML architecture to complex keyboard interaction patterns and user-specific preferences like reduced motion. By integrating these patterns, teams can ensure their applications are usable by individuals relying on screen readers, keyboard-only navigation, or those with varying motor and cognitive abilities. It is an essential companion for frontend engineers during the component design, implementation, and code review phases.

• Implements semantic HTML landmarks (header, nav, main, footer) to improve document structure and navigation for assistive technologies.

• Provides patterns for screen reader support, including the use of sr-only utility classes for hidden labels and aria-live regions for dynamic content updates.

• Offers robust guidance on keyboard navigation, focusing on element interactivity, focus management, focus trapping in modals, and visual indicators using focus-visible.

• Includes user-preference handling for prefers-reduced-motion to mitigate issues related to vestibular disorders by disabling or scaling down decorative animations.

• Ensures touch target compliance, enforcing minimum sizing requirements (e.g., 44x44px) to support users with motor impairments or mobile devices.

• Intended for React developers, accessibility auditors, and UI designers working within the JavaScript ecosystem.

• Best applied during the initial component scaffolding phase or when refactoring existing UI interactive elements.

• Emphasizes the use of high-level abstractions like react-aria-components to simplify complex accessibility state management.

• Expected usage involves referencing specific rule documentation during code review to validate semantic correctness and assistive technology compatibility.

• Constraints include staying aligned with the repository's modular rule structure, where each accessibility principle is isolated into focused, actionable guidance.