accessibility-compliance

Implement WCAG 2.2 compliant interfaces and ARIA patterns for UI components.

Updated Apr 8, 2026
One-click install
npx skills add https://github.com/MinhAnh-Corp/ai-designer --skill accessibility-compliance-minhanh-corp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-compliance
Source: https://github.com/MinhAnh-Corp/ai-designer/tree/main/skills/ui-accessibility-compliance
Command: npx skills add https://github.com/MinhAnh-Corp/ai-designer --skill accessibility-compliance-minhanh-corp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Interfaces often fail to meet WCAG 2.2 accessibility requirements, hindering inclusive user experiences. This Skill provides structured guidance on implementing accessible patterns, ARIA, and mobility considerations to ensure interfaces are perceivable, operable, and robust across devices and assistive technologies.

Core Features & Use Cases

  • WCAG 2.2 guidelines reference and practical ARIA pattern guidance for common components (buttons, dialogs, forms).
  • Keyboard navigation, focus management, screen reader compatibility, and mobile accessibility patterns for inclusive design.
  • Accessibility testing checklists, audits, and design reviews to ensure conformance across web and mobile applications.

Quick Start

Describe a UI component and I will provide WCAG 2.2 compliant markup and ARIA patterns ready for integration.

Frequently Asked Questions about accessibility-compliance

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

FAQPage Schema
How do I make my UI components WCAG 2.2 compliant with proper ARIA roles?

To make UI components WCAG 2.2 compliant, apply correct ARIA roles, states, and properties to ensure screen reader compatibility. This provides structured guidance for common components like buttons, dialogs, and forms to guarantee interfaces are perceivable and operable.

What is the best way to implement keyboard navigation and focus management for web accessibility?

Keyboard navigation and focus management require defining logical tab order and visible focus indicators for accessibility. Implementing these patterns ensures users can operate interfaces without a mouse, managing focus shifts correctly during dynamic UI changes like dialog openings.

Does this WCAG accessibility guidance apply to both web and mobile interfaces?

Yes, this WCAG accessibility guidance applies to both web and mobile interfaces. It specifies mobile accessibility patterns and inclusive design considerations that ensure interfaces are robust and operable across various devices and assistive technologies.

How do I conduct an accessibility audit for screen reader compatibility?

Conduct an accessibility audit by using provided testing checklists to review screen reader compatibility and ARIA implementation. This process evaluates your interface against WCAG 2.2 requirements to identify and resolve barriers for assistive technology users.

What ARIA patterns should I use for accessible dialogs and forms?

Accessible dialogs and forms require specific ARIA patterns like role='dialog', aria-modal, and proper label associations. Specifying these ARIA roles and managing focus ensures the components meet WCAG 2.2 conformance for screen reader users.