skills.rest
EdwinFermin
EdwinFerminCOMMUNITY
Explore all skills by this author →
GitHub

accessibility

Implement WCAG 2.2 AA accessible React components with keyboard navigation and ARIA labeling.

Updated Nov 18, 2025
Search Tags:#accessibility#wcag#aria#react-aria#a11y-patterns#focus-trap#roving-tabindex
One-click install
npx skills add https://github.com/EdwinFermin/innvox --skill accessibility-edwinfermin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/EdwinFermin/innvox/tree/main/.agents/skills/accessibility
Command: npx skills add https://github.com/EdwinFermin/innvox --skill accessibility-edwinfermin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-aria, react-stately, motion, zod, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Accessibility gaps in modern web apps hinder users with disabilities from effectively interacting with interfaces, causing compliance risk and reduced reach.

Core Features & Use Cases

  • WCAG 2.2 AA compliant patterns and focus-management templates for modals, dialogs, tooltips, and overlays.
  • React Aria-based components and hooks (useButton, useDialog, useModalOverlay, useTooltip, useComboBox, etc.) plus real-world onboarding guides and anti-patterns.
  • Checklists, references, and patterns to accelerate accessible UI development for dashboards, forms, and interactive components.

Quick Start

Start by auditing your UI for WCAG 2.2 AA patterns, then integrate the provided templates and hooks into your React components to begin delivering accessible interactions.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I implement a focus trap for React modals that meets WCAG 2.2 AA standards?▼

To implement a WCAG 2.2 AA compliant focus trap for React modals, you can use the provided React Aria-based hooks and templates to enforce reliable keyboard navigation. These patterns ensure focus remains within overlays during interaction.

Can I use React Aria hooks to build accessible comboboxes and tooltips?▼

Yes, you can use React Aria hooks like useComboBox and useTooltip to build accessible interfaces. The Skill provides reusable templates and integration guides for these specific components to ensure proper ARIA labeling.

What is the best way to manage ARIA labeling and keyboard navigation in React overlays?▼

The best way to manage ARIA labeling and keyboard navigation in React overlays is by applying pre-built accessibility patterns. These templates enforce WCAG 2.2 AA compliance across modals, dialogs, and tooltips.

Do I need the react-aria and react-stately libraries to use these accessibility patterns?▼

Yes, you need the react-aria and react-stately libraries to use these accessibility patterns. The Skill's components and hooks depend on these libraries to deliver reliable interactions and manage UI state.

Why does my roving tabindex implementation fail keyboard navigation in complex menus?▼

Roving tabindex implementations often fail due to incorrect focus state management. The Skill addresses this by providing validated React Aria patterns and a11y-patterns to ensure proper focus management across menu items.

Are there accessibility checklists for auditing React dashboards and forms?▼

Yes, there are accessibility checklists and references included for auditing React dashboards and forms. These resources help identify WCAG 2.2 AA gaps and accelerate accessible UI development using provided templates.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
1

tanstack-form

Build accessible forms with TanStack Form and React Aria Components.

Official
Intermediate
PMDevSolutionsPMDevSolutions
7

react-accessibility

Implement WCAG 2.2 Level AA accessible patterns in React applications.

Official
Intermediate
MolcajeteAIMolcajeteAI
2

form-handling-mobile

Handle and validate React Native forms with React Hook Form and Zod.

Official
Intermediate
Hack23Hack23
9

html-accessibility

Audit static HTML/CSS sites and implement WCAG 2.1 AA accessibility improvements.

Official
Intermediate