skills.rest
cypxxc
cypxxcCOMMUNITY
Explore all skills by this author →
GitHub

Accessibility Audit

Audit React components for WCAG 2.1 AA accessibility gaps.

1|Updated Jan 5, 2026
Search Tags:#accessibility#a11y#react#semantic-html#color-contrast#keyboard-navigation#wcag-2.1
One-click install
npx skills add https://github.com/cypxxc/RMU-Campus-X --skill accessibility-audit-cypxxc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Accessibility Audit
Source: https://github.com/cypxxc/RMU-Campus-X/tree/main/.agent/skills/accessibility-audit
Command: npx skills add https://github.com/cypxxc/RMU-Campus-X --skill accessibility-audit-cypxxc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps development teams ensure their React components and applications meet WCAG 2.1 AA accessibility standards, reducing barriers for users with disabilities.

Core Features & Use Cases

  • Provides actionable checklists and practical examples for semantic HTML, keyboard navigation, ARIA labeling, color contrast, focus management, and accessible forms.
  • Use cases include code reviews, UI audits, and QA checks during feature development and maintenance to continuously improve accessibility.

Quick Start

Run through the accessibility checklist while reviewing a new React component and apply recommended improvements immediately.

Frequently Asked Questions about Accessibility Audit

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

FAQPage Schema
How do I audit React components for WCAG 2.1 AA accessibility compliance?▼

You audit React components for WCAG 2.1 AA accessibility by applying a checklist for semantic HTML, keyboard navigation, ARIA labeling, and color contrast to identify gaps and implement concrete fixes.

What accessibility issues should I check during a React code review?▼

During a React code review, you should check semantic HTML structure, keyboard navigation, ARIA labeling, color contrast, focus management, and accessible forms to ensure components meet WCAG 2.1 AA standards.

Does this accessibility audit approach work for general web apps or only React?▼

This accessibility audit approach is designed specifically for React applications, providing actionable checklists and practical examples to enforce WCAG 2.1 AA standards within React component development and maintenance workflows.

How do I fix keyboard navigation and focus management in React?▼

Fix keyboard navigation and focus management in React by applying practical checklist examples that enforce proper semantic HTML interactions, logical tab order, and effective focus trapping to meet WCAG 2.1 AA requirements.

What is the best way to ensure color contrast meets WCAG 2.1 AA standards?▼

The best way to ensure color contrast meets WCAG 2.1 AA standards is to use an accessibility checklist during UI audits to verify ratios and implement recommended improvements immediately within your React components.

When do I need to run an accessibility audit on my UI components?▼

You need to run an accessibility audit during code reviews, UI audits, and QA checks in feature development and maintenance to continuously identify accessibility gaps and implement concrete fixes in your React components.

Related Skills

Explore More Software Engineering Skills→
shawn-sandyshawn-sandy

wcag-compliance-reviewer

Identify WCAG 2.1 AA accessibility violations in HTML/CSS and React/TypeScript code.

Community
Intermediate
guichefferguicheffer
3

web-accessibility

Enforce WCAG 2.1 AA compliance using semantic HTML, ARIA attributes, axe-core, and jest-axe automated tests.

Community
Intermediate
JEO-tech-aiJEO-tech-ai
8

web-accessibility

Apply WCAG 2.1 guidelines to identify and fix accessibility gaps in web UIs.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate