accessibility-compliance

Implements WCAG 2.2-compliant interfaces with ARIA, keyboard navigation, and semantic HTML for web and mobile UI work.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/Jhabbig/Habbig --skill accessibility-compliance-jhabbig
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-compliance
Source: https://github.com/Jhabbig/Habbig/tree/main/.claude/plugins/wshobson/ui-design/skills/accessibility-compliance
Command: npx skills add https://github.com/Jhabbig/Habbig --skill accessibility-compliance-jhabbig

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and audit interfaces so they are usable by people with disabilities, meeting WCAG 2.2 expectations without sacrificing product quality.

Core Features & Use Cases

  • WCAG 2.2 guidance: Apply perceivable, operable, understandable, and robust patterns to real product UI.
  • ARIA and semantic HTML: Choose native elements first, then use ARIA correctly for dialogs, tabs, menus, comboboxes, alerts, and live regions.
  • Keyboard and mobile accessibility: Manage focus, traps, skip links, touch target sizing, VoiceOver, TalkBack, and reduced-motion support.
  • Use case: Audit a checkout flow, then fix missing labels, weak contrast, keyboard traps, and inaccessible custom controls before release.

Quick Start

Ask for an accessibility audit of your interface and have the Skill identify the most important WCAG, keyboard, ARIA, and mobile fixes in priority order.

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 custom web controls accessible for screen readers?

To make custom web controls accessible for screen readers, use semantic HTML first and apply ARIA patterns for dialogs, tabs, menus, and comboboxes to establish proper name-role-value relationships. This ensures compatibility with assistive technologies.

What is the best way to audit a web UI for WCAG 2.2 compliance?

The best way to audit a web UI for WCAG 2.2 compliance is to evaluate perceivable, operable, understandable, and robust patterns. Focus on keyboard navigation, focus management, form labeling, and contrast-aware design to identify and fix usability barriers.

How do I fix keyboard traps and manage focus in a single-page application?

To fix keyboard traps and manage focus in a single-page application, implement proper focus management, skip links, and logical tab order. Ensure custom dialogs and menus enforce focus traps correctly so keyboard-only users can navigate safely.

Does this accessibility audit cover mobile screen readers like VoiceOver and TalkBack?

Yes, this accessibility audit covers mobile screen readers like VoiceOver and TalkBack. It evaluates touch target sizing, mobile accessibility APIs, and reduced-motion support to ensure operable and robust mobile interfaces.

When should I use ARIA live regions instead of standard HTML alerts?

You should use ARIA live regions instead of standard HTML alerts when dynamic content updates occur without a page reload. Live regions ensure screen readers announce changes immediately, maintaining perceivable and understandable status updates.

How do I meet WCAG 2.2 target-size requirements for touch controls?

To meet WCAG 2.2 target-size requirements for touch controls, ensure interactive elements have sufficient minimum sizing. Apply mobile accessibility patterns and contrast-aware design to verify operability across varying viewport scales.