auto-accessibility

What problem does it solve?

Accessibility patterns Claude inconsist inconsist applies: ARIA role completeness, touch target sizing, forced-colors/reduced-motion support, and WCAG 2.2 new criteria. Use when building UI components, forms, modals, tables, or interactive features. Triggers: accessibility, a11y, accessible, WCAG, screen reader, keyboard navigation, focus, aria, role, alt text, contrast, tab index, focus trap, landmark, semantic HTML, label, fieldset, live region.

Core Features & Use Cases

• ARIA completeness: Ensure modals have role="dialog"/role="alertdialog" etc., forms have aria-required, aria-invalid, aria-describedby, icon buttons have aria-label, tables have caption/scope/aria-live, and loading/errors regions are announced.
• Touch targets: Enforce minimum 24x24 or larger touch targets and appropriate spacing.
• Media queries you skip: Implement prefers-reduced-motion and forced-colors rules to preserve accessibility during user preferences changes.
• Focus management: Include focus traps in modals, focus restoration, and scroll-margin-top adjustments.
• Svelte-specific gotchas: Ensure correct ARIA roles and tabindex on interactive containers, avoid redundant roles.

Quick Start

Apply complete ARIA roles, accessible labeling, and proper focus management to all interactive UI components.