a11y-design-pro

Audit web UI accessibility against WCAG standards using axe-core, Lighthouse, and Pa11y.

Updated Jun 27, 2026
One-click install
npx skills add https://github.com/truongnat/aix --skill a11y-design-pro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: a11y-design-pro
Source: https://github.com/truongnat/aix/tree/main/content/skills/a11y-design-pro
Command: npx skills add https://github.com/truongnat/aix --skill a11y-design-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires axe-core, lighthouse, pa11y, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of ensuring accessibility and compliance with WCAG standards for web UIs, providing a comprehensive toolset for implementing ARIA patterns, testing color contrast, and managing focus for better screen reader support.

Core Features & Use Cases

  • WCAG Compliance Auditing: Evaluates web UIs against WCAG 2.1/2.2 standards, focusing on ARIA implementation, keyboard navigation, and automated testing.
  • ARIA Patterns Implementation: Offers guidelines for integrating ARIA roles, states, and properties into dynamic widgets.
  • Automated Accessibility Testing: Provides setup instructions for integrating axe-core, Lighthouse, and Pa11y into CI/CD pipelines.

Quick Start

Run the a11y-design-pro skill to audit the accessibility of the current web page.

Frequently Asked Questions about a11y-design-pro

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

FAQPage Schema
How do I audit my web UI for WCAG compliance?

WCAG compliance auditing evaluates web UIs against WCAG 2.1/2.2 standards, focusing on ARIA implementation, keyboard navigation, and automated testing using axe-core, Lighthouse, and Pa11y to identify accessibility violations.

What's the best way to implement ARIA patterns for dynamic widgets?

Implementing ARIA patterns involves integrating specific ARIA roles, states, and properties into dynamic widgets to ensure screen readers can accurately interpret and navigate interactive web content.

How do I integrate automated accessibility testing into a CI/CD pipeline?

Automated accessibility testing integrates axe-core, Lighthouse, and Pa11y into CI/CD pipelines to continuously evaluate web content, ensuring ongoing compliance with WCAG standards and assistive technology support.

Does this accessibility testing approach support compliance with ADA and EAA requirements?

Accessibility testing ensures compliance with legal requirements like ADA, EN 301 549, and EAA by assessing web content against WCAG standards, managing focus, and handling various assistive technologies.

Why does my screen reader not navigate my web content properly?

Screen reader navigation issues often stem from missing ARIA patterns, inadequate keyboard navigation support, or poor focus management, which can be identified through WCAG auditing and automated testing.

Do I need axe-core and Lighthouse to test web accessibility?

Axe-core, Lighthouse, and Pa11y are required dependencies for testing and implementing accessibility, providing automated evaluation of WCAG standards, color contrast, and screen reader support.