frontend-accessibility-best-practices_skill

Overview

This skill provides concise accessibility (a11y) best practices for building inclusive React components following WCAG guidance. It bundles rules across semantic HTML, screen reader support, keyboard & focus behavior, and user preference handling. Use it to design, implement, or review UI components, forms, and interactive patterns for real-world apps.

How this skill works

The skill inspects common component patterns and recommends concrete fixes and examples: prefer semantic HTML landmarks, add screen-reader-only labels, use ARIA live regions for dynamic updates, ensure keyboard operability and visible focus, and honor user motion preferences. It points to practical implementations such as accessible buttons, focus-trapped modals, reduced-motion fallbacks, and appropriate touch target sizing.

When to use it

• Creating new UI components or layout regions
• Building or validating forms and form fields
• Adding interactive controls, buttons, or menus
• Implementing dynamic updates or notification content
• Reviewing code for accessibility regressions

Best practices

• Use semantic HTML (header, nav, main, footer, h1–h6, landmarks) instead of divs for structure and landmarks
• Provide accessible names for icon-only controls using visually hidden text (sr-only) or aria-label
• Announce dynamic content with role="alert" or aria-live="polite" as appropriate
• Prefer native controls (button, a, input) for built-in keyboard support; avoid click-only divs
• Show visible focus indicators and trap focus in modal dialogs; ensure focus order is logical
• Respect prefers-reduced-motion and ensure touch targets are at least 44x44px

Example use cases

• Turning a div-based header/nav into semantic <header> and <nav aria-label> landmarks
• Making icon-only close buttons accessible with an sr-only label and aria-hidden icons
• Wrapping status updates in a role="status" region so screen readers announce result counts
• Replacing clickable divs with <button> or react-aria Button for keyboard activation
• Using a reduced-motion hook to skip animations for users who prefer less motion