Accessibility & Inclusive Design

Convert accessibility requirements into WCAG 2.2 and ARIA implementation guidance.

35|13|Updated Feb 14, 2026

Search Tags:#accessibility #wcag #neurodiversity #aria #screen-readers #keyboard-navigation #inclusive-design

Ready to run

npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill accessibility-inclusive-design-phazurlabs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Accessibility & Inclusive Design
Source: https://github.com/phazurlabs/ux-ui-mastery/tree/main/skills/accessibility-inclusive-design
Command: npx skills add https://github.com/phazurlabs/ux-ui-mastery --skill accessibility-inclusive-design-phazurlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams design and implement interfaces that are usable by people with diverse abilities, devices, and contexts, reducing accessibility bugs, legal risk, and avoidable friction.

Core Features & Use Cases

WCAG 2.2 Guidance: Apply perceivable, operable, understandable, and robust principles to real UI decisions.
ARIA and Semantic HTML Patterns: Build accessible dialogs, tabs, menus, forms, live regions, and keyboard flows correctly.
Inclusive Design Coverage: Address screen readers, keyboard-only use, low vision, motor differences, neurodiversity, reduced motion, high contrast, and cognitive accessibility.
Use Case: A product team can use this Skill to audit a checkout flow, fix focus order and labels, improve contrast and touch targets, and ship a more accessible experience with confidence.

Quick Start

Ask for an accessibility review of the current interface and request concrete WCAG 2.2, ARIA, keyboard, contrast, and screen reader fixes.

Frequently Asked Questions about Accessibility & Inclusive Design

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

FAQPage Schema

How do I make my UI components compliant with WCAG 2.2 accessibility standards?▼

To make UI components compliant with WCAG 2.2 accessibility standards, apply perceivable, operable, understandable, and robust principles to validate interface decisions and generate actionable fixes. This ensures your interfaces are usable by people with diverse abilities and contexts.

What is the correct way to use ARIA and semantic HTML for screen reader support?▼

Correct ARIA and semantic HTML for screen reader support involves building accessible dialogs, tabs, menus, forms, and live regions using established patterns. This ensures screen readers can accurately interpret and navigate dynamic interface elements.

Can I use inclusive design patterns to improve keyboard navigation and focus order?▼

Yes, you can use inclusive design patterns to improve keyboard navigation and focus order by auditing interface flows and applying semantic HTML. This ensures keyboard-only users can effectively operate menus, forms, and interactive components without barriers.

How do I audit a checkout flow for neurodiversity and cognitive accessibility?▼

To audit a checkout flow for neurodiversity and cognitive accessibility, evaluate the interface against inclusive design best practices. This identifies friction points and provides concrete guidance for improving contrast, touch targets, and motion sensitivity.

What's the best way to fix low contrast and touch target issues in web forms?▼

The best way to fix low contrast and touch target issues in web forms is to validate component designs against WCAG 2.2 criteria. This transforms accessibility requirements into actionable implementation guidance for improved form usability and motor accessibility.