skills.rest
Corvalis-LLC
Corvalis-LLCOFFICIAL
Explore all skills by this author →
GitHub

auto-accessibility

Standardizes ARIA roles, focus management, and keyboard navigation for UI components.

6|Updated Mar 31, 2026
Search Tags:#accessibility#a11y#ui-patterns#aria#keyboard-navigation#focus-management#wcag-2.2
One-click install
npx skills add https://github.com/Corvalis-LLC/Crow-Stack --skill auto-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auto-accessibility
Source: https://github.com/Corvalis-LLC/Crow-Stack/tree/main/skills/auto-accessibility
Command: npx skills add https://github.com/Corvalis-LLC/Crow-Stack --skill auto-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about auto-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement WCAG 2.2 keyboard navigation and focus management in UI components?▼

Keyboard navigation and focus management require standardizing focus traps in modals, focus restoration, and scroll-margin-top adjustments to ensure WCAG 2.2 criteria are met across interactive widgets.

What ARIA roles and attributes do I need for accessible forms and modals?▼

Accessible forms and modals need complete ARIA roles like role="dialog", aria-required, aria-invalid, and aria-describedby, while icon buttons require aria-label and tables need caption, scope, and aria-live attributes.

How do I support prefers-reduced-motion and forced-colors media queries for accessibility?▼

Accessibility support for user preferences involves implementing prefers-reduced-motion and forced-colors CSS rules to preserve UI component accessibility during system preference changes.

What is the minimum touch target size for WCAG 2.2 compliance?▼

The minimum touch target size for WCAG 2.2 compliance is 24x24 pixels or larger, with appropriate spacing enforced between interactive UI elements to ensure usable touch targets.

Does this work with Svelte interactive containers and ARIA roles?▼

Svelte interactive containers require correct ARIA roles and tabindex attributes, avoiding redundant roles to ensure proper screen reader semantics and keyboard accessibility.

Why are my screen reader users missing loading and error announcements?▼

Loading and error announcements are missed when regions lack aria-live attributes; standardizing ARIA completeness ensures dynamic content updates are properly announced to screen reader users.

Related Skills

Explore More Software Engineering Skills→
voidrotvoidrot

accessibility

Implement accessible UI components with WCAG 2.2 AA guidance.

Community
Intermediate
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

Audit web frontends for WCAG 2.2 AA conformance with static and live checks.

Official
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
AribSudiaAribSudia
2

arib-check-a11y

Audit frontend codebases for WCAG 2.1 Level AA accessibility compliance.

Community
Advanced