accessibility

Audit React/HTML UI for WCAG 2.2 AA failures and apply concrete fixes.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/jjmendezrodriguez/jm-claude-plugin --skill accessibility-jjmendezrodriguez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/jjmendezrodriguez/jm-claude-plugin/tree/main/skills/accessibility
Command: npx skills add https://github.com/jjmendezrodriguez/jm-claude-plugin --skill accessibility-jjmendezrodriguez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you find and fix accessibility gaps that prevent users with disabilities from understanding, navigating, and using your web interface.

Core Features & Use Cases

  • WCAG 2.2 AA audit guidance: Identify critical failures like unlabeled form controls, missing alt text, insufficient contrast, keyboard traps, and invisible focus.
  • Keyboard, focus, and semantic fixes: Ensure every interactive element is reachable by keyboard, focus order makes sense, and focus is never obscured or removed globally.
  • Screen reader support for forms and UI states: Add correct accessible names, error announcements (role="alert", aria-invalid), and appropriate ARIA only when native semantics are insufficient.

Quick Start

Use the accessibility skill to review the UI changes in your React/HTML component for WCAG 2.2 AA compliance and produce a prioritized list of what to fix first.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I audit my React components for WCAG 2.2 AA compliance?

Audit React components for WCAG 2.2 AA compliance by reviewing UI changes to identify failures like unlabeled controls, missing alt text, and insufficient contrast, then applying concrete HTML and ARIA fixes for perceivability and operability.

What is the best way to fix keyboard navigation and focus traps in web UI?

Fix keyboard navigation and focus traps by ensuring every interactive element is reachable, maintaining logical focus order, applying focus-visible behavior, and preventing focus from being obscured or removed globally during component interactions.

How do I wire up screen reader announcements for form errors?

Wire up screen reader announcements for form errors by using role="alert", setting aria-invalid on inputs, providing accessible names, and applying ARIA only when native HTML semantics are insufficient for state communication.

When should I use ARIA versus native HTML for accessibility?

Use native semantic HTML first for accessibility, applying ARIA only when needed to supplement insufficient semantics, such as wiring live regions, modal patterns, and error announcements that native elements cannot handle.

Can this skill review pull requests for accessibility issues?

Yes, review component pull requests for accessibility issues by auditing UI changes against WCAG 2.2 AA requirements, checking semantic HTML, labeled inputs, focus-visible behavior, reduced-motion support, and generating a prioritized fix list.

What accessibility testing workflows does this support?

It supports accessibility testing workflows that validate WCAG 2.2 AA requirements including correct semantic HTML, keyboard navigation, focus management, contrast adjustments, screen reader announcements, and reduced-motion support.