skills.rest
Scardubu
ScardubuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-system-architect

Implements WCAG 2.2 AA accessibility patterns for React components and web interfaces.

1|Updated May 4, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#react#wcag#focus management#aria
One-click install
npx skills add https://github.com/Scardubu/SwarmXQ --skill accessibility-system-architect-scardubu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-system-architect
Source: https://github.com/Scardubu/SwarmXQ/tree/main/.ai/skills/accessibility-system-architect
Command: npx skills add https://github.com/Scardubu/SwarmXQ --skill accessibility-system-architect-scardubu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building accessible interfaces is often treated as a final audit, leading to costly retrofit patches for keyboard navigation, screen reader support, and focus management. This Skill embeds accessibility into component architecture from the start so interfaces meet WCAG 2.2 AA by construction. ## Core Features & Use Cases - Component Pattern Library: Production-ready React implementations for modals with focus traps, accordions, comboboxes, data tables, skip navigation, and live regions with correct ARIA semantics. - Systematic Audit Protocol: A five-step workflow covering keyboard journey mapping, semantic structure, component patterns, color contrast ratios, and reduced-motion handling. - Testing & Quality Gates: Automated axe-core integration for CI plus a manual checklist covering VoiceOver/NVDA, 200% zoom, forced colors mode, and reduced motion. - Use Case: When building a custom dropdown or dialog in React, use this Skill to get the correct ARIA roles, keyboard handlers, focus trap logic, and focus-return behavior instead of assembling them from scattered documentation. ## Quick Start Ask the AI to make your React modal or form accessible with keyboard navigation and screen reader support following WCAG 2.2 AA.

Frequently Asked Questions about accessibility-system-architect

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

FAQPage Schema
How do I make a React modal accessible with focus trap?▼

Use role="dialog" with aria-modal="true" and aria-labelledby, then trap Tab and Shift+Tab within the dialog's focusable elements. On close, return focus to the trigger element and support Escape to dismiss.

How to add keyboard navigation to a custom combobox?▼

Set role="combobox" with aria-expanded, aria-controls, and aria-activedescendant on the input. Handle ArrowDown and ArrowUp to move the active option, Enter to select, and Escape to close the listbox.

What color contrast ratio does WCAG 2.2 AA require?▼

WCAG 2.2 AA requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold), and 3:1 for UI components and focus indicators against adjacent colors. Never convey meaning through color alone.

Should I use aria-label or semantic HTML for accessibility?▼

Semantic HTML comes first — ARIA supplements semantics but never replaces them. Use native elements like button, nav, and h1-h6 before reaching for roles, and only add aria-label for icon-only controls lacking visible text.

How do I test accessibility with screen readers and automation?▼

Run axe-core via @axe-core/react in development for automated checks, then manually tab through every feature, test with VoiceOver on macOS or NVDA on Windows, zoom to 200%, and verify forced colors mode.

Why should aria-disabled be used instead of the disabled attribute?▼

aria-disabled keeps the element focusable so screen reader users can discover it and understand why it is unavailable, while the HTML disabled attribute removes it from the tab order entirely. Pair it with aria-busy during loading states.

Related Skills

Explore More Software Engineering Skills→
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
petrkindlmannpetrkindlmann
64

accessibility-testing

Automate accessibility testing with axe-core and Playwright for WCAG conformance.

Community
Advanced
dembrandtdembrandt
33

micro-interactions

Design micro-interactions that confirm user actions and communicate state changes.

Official
Intermediate
Eng-susoEng-suso

accessibility-compliance-accessibility-audit

Audit web interfaces for WCAG compliance using automated scans and manual testing checklists.

Community
Intermediate