skills.rest
mauriciodelrio
mauriciodelrioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

3|Updated Apr 12, 2026
Search Tags:#accessibility#a11y#react#wcag#nextjs#axe-core#aria
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill a11y-rules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-rules
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/a11y-rules
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill a11y-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers and reviewers ensure React and Next.js UI components meet WCAG 2.2 AA accessibility requirements by providing a practical, component-focused checklist and implementation patterns for semantics, ARIA, focus handling, keyboard navigation, media, forms, contrast, and automated testing.

Core Features & Use Cases

  • Semantic-first guidance for using native HTML elements before adding ARIA.
  • ARIA patterns & attributes for icon buttons, dialogs, live regions, and error descriptions.
  • Focus management & keyboard UX including focus traps, restore-on-close, skip links, and keyboard interaction models for widgets.
  • Media and images advice for descriptive alt text, captions, and decorative assets.
  • Forms & validation patterns with accessible labels, fieldset/legend grouping, aria-invalid, and alert-driven error announcements.
  • Testing workflows with axe-core and Lighthouse plus keyboard-interaction tests to validate behavior.
  • Use case: During a code review, run the checklist and tests to fix a modal that lacks focus trapping, missing aria-labels on icon buttons, and insufficient color contrast.

Quick Start

Use the a11y-rules skill to audit a React component, list accessibility violations, and produce a prioritized fix checklist.

Frequently Asked Questions about a11y-rules

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

FAQPage Schema
How do I make my React components WCAG 2.2 AA compliant?▼

To make React components WCAG 2.2 AA compliant, apply a semantic-first checklist covering ARIA attributes, focus trapping, keyboard navigation, form semantics, and contrast ratios. This validates native HTML usage and ensures accessible interactions for component development and code reviews.

How do I fix focus trapping in a Next.js modal dialog?▼

Fix focus trapping in a Next.js modal dialog by implementing focus management patterns that trap focus within the component and restore focus to the trigger element on close. These keyboard UX patterns ensure proper interaction models for accessible widgets.

What is the best way to test React accessibility with axe-core?▼

The best way to test React accessibility with axe-core is integrating it into your testing workflows alongside Lighthouse and keyboard-interaction tests. This combination validates behavior, detects ARIA violations, and confirms components meet WCAG 2.2 AA requirements automatically.

Does this accessibility checklist support Next.js and React component reviews?▼

Yes, this accessibility checklist supports Next.js and React component reviews by providing implementation patterns for forms, media captions, and ARIA usage. It fits directly into design systems and testing pipelines to verify semantic HTML and contrast requirements.

When should I use ARIA attributes instead of native HTML elements?▼

Use ARIA attributes instead of native HTML elements only when semantic HTML cannot achieve the required interaction model, such as with icon buttons, live regions, or custom dialogs. A semantic-first approach ensures proper ARIA usage without duplicating native semantics.

Related Skills

Explore More Software Engineering Skills→
hopeoverturehopeoverture
6

testing-next-stack

Scaffold Vitest, RTL, Playwright, and axe-core testing for Next.js projects.

Community
Advanced
aquariuscookaquariuscook

QE Visual Accessibility

Test web applications for visual regressions, responsive design, and WCAG 2.2 AA compliance.

Community
Advanced
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
jmrplensjmrplens

accessibility-audit

Run automated WCAG 2.2 AA accessibility audits with axe-core checks.

Community
Intermediate