ui-design-a11y

Detect and resolve WCAG 2.1 accessibility issues in web designs.

Updated Jul 5, 2026
One-click install
npx skills add https://github.com/Arupbiswas09/claude_skills --skill ui-design-a11y-arupbiswas09
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design-a11y
Source: https://github.com/Arupbiswas09/claude_skills/tree/main/skills/ui-design-a11y
Command: npx skills add https://github.com/Arupbiswas09/claude_skills --skill ui-design-a11y-arupbiswas09

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses accessibility issues in web designs, ensuring compliance with WCAG 2.1 standards and enhancing usability for all users.

Core Features & Use Cases

  • Accessibility Checks: Detects common issues like missing alt text, form labeling, keyboard navigation, color contrast, and ARIA misuse.
  • Repair Suggestions: Provides code examples for fixing issues such as semantic HTML, focus management, and screen reader support.
  • Use Case: Ideal for developers looking to validate their designs for accessibility, ensuring compliance and inclusivity.

Quick Start

Run the 'ui-design 审查这段代码的无障碍问题' command to check accessibility issues in your code.

Frequently Asked Questions about ui-design-a11y

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

FAQPage Schema
How do I check my web design for WCAG 2.1 accessibility issues?

To identify accessibility issues in web design according to WCAG 2.1 standards, you can run automated checks to detect missing alt text, form labeling, keyboard navigation, color contrast, and ARIA misuse. This process requires no manual intervention and integrates seamlessly into the development workflow.

What is the best way to fix semantic HTML and screen reader support issues?

The best way to fix semantic HTML and screen reader support issues is by applying targeted repair suggestions with code examples. These fixes address focus management and ensure compliance with accessibility standards.

Can I detect ARIA misuse and color contrast problems in my code automatically?

Yes, you can automatically detect ARIA misuse and color contrast problems in your code. Accessibility checks identify these common issues alongside missing alt text and form labeling errors to enhance usability for all users.

Does this accessibility check require manual configuration to run?

No, this accessibility check requires no manual configuration to run. It integrates seamlessly into the development workflow to validate designs for inclusivity and compliance without manual intervention.

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

To validate keyboard navigation and focus management in web components, run accessibility checks that identify issues and provide repair suggestions with code examples. This ensures your designs are compliant and inclusive.