accessibility-per-component

Audit a design system component against WCAG 2.1 AA standards.

155|7|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/murphytrueman/design-system-ops --skill accessibility-per-component
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-per-component
Source: https://github.com/murphytrueman/design-system-ops/tree/main/skills/accessibility-per-component
Command: npx skills add https://github.com/murphytrueman/design-system-ops --skill accessibility-per-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill automates the process of auditing individual design system components for accessibility compliance, ensuring a better experience for all users.

Core Features & Use Cases

  • Comprehensive Audit: Assesses components across five key dimensions: keyboard navigation, screen reader experience, color and contrast, focus management, and ARIA implementation.
  • Actionable Guidance: Provides specific PASS/FAIL/WARN results with detailed remediation steps and code examples.
  • Use Case: A senior engineer needs to verify that a new "Dropdown" component meets WCAG 2.1 AA standards before it's released. They use this Skill to get a detailed report on its accessibility, including specific code fixes for any issues found.

Quick Start

Run an accessibility audit on the 'button' component.

Frequently Asked Questions about accessibility-per-component

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

FAQPage Schema
How do I audit a design system component for WCAG 2.1 AA compliance?

Run an accessibility audit on the component to assess keyboard navigation, screen reader experience, color contrast, focus management, and ARIA implementation against WCAG 2.1 AA standards. The audit returns PASS/FAIL/WARN results with detailed remediation steps and code examples for each finding.

What does an accessibility component audit check for?

An accessibility component audit checks for issues across five key dimensions: keyboard navigation, screen reader experience, color and contrast, focus management, and ARIA implementation. It generates PASS, FAIL, or WARN results with specific remediation guidance and code fixes.

How do I fix keyboard navigation and focus management issues in web components?

Run an accessibility audit on the component to identify specific keyboard navigation and focus management failures. The audit provides targeted remediation steps and code examples to correct focus order, visible focus states, and keyboard operability for WCAG 2.1 AA compliance.

Can I get specific code examples for ARIA implementation issues?

Yes, running an accessibility audit on the component identifies incorrect ARIA usage and provides specific code examples demonstrating how to implement the correct roles, states, and properties to meet WCAG 2.1 AA standards.

Does this accessibility audit work for any single design system component?

Yes, the accessibility audit performs a detailed evaluation of any single design system component against WCAG 2.1 AA standards. It ensures individual UI elements like dropdowns or buttons meet accessibility requirements before release.

What is the best way to verify screen reader experience for a UI component?

Run an accessibility audit on the UI component to evaluate its ARIA implementation and semantic structure. The audit identifies screen reader barriers and provides remediation guidance to improve assistive technology compatibility against WCAG 2.1 AA standards.