accessibility-system

What problem does it solve?

This Skill solves the problem of inaccessible interfaces by providing an end-to-end accessibility design system that covers keyboard navigation, screen reader behavior, ARIA patterns, focus management, and form error handling beyond basic WCAG checklists.

Core Features & Use Cases

• Focus management & modal/dialog UX: Save the trigger element, move focus on open, trap focus within, and restore focus on close for keyboard and screen reader users.
• Screen reader-first semantics: Landmark role guidance and heading hierarchy rules that define navigation through structure (not visuals).
• Accessible forms & error communication: Use proper labeling, aria-describedby, aria-invalid, live regions (aria-live / role="alert"), and focus direction to make validation understandable and actionable.
• Color-independent communication: Ensure status and error signals work without color alone using icons/text/patterns and contrast references.
• Testing & automation integration: Pair code practices with axe-core/Lighthouse/ESLint accessibility checks plus manual screen reader and keyboard verification.

Quick Start

Apply the accessibility-system guidance to your UI by implementing skip links, correct heading hierarchy, and focus-managed dialogs, then validate with axe-core and keyboard-only testing.