Can this skill help me fix contrast issues?

Yes, it includes a quick reference for minimum contrast ratios (e.g., 4.5:1 for normal text) for both text and graphical UI components.

How does this skill help with screen reader compatibility?

It provides rules for using semantic HTML, alt text for images, and appropriate ARIA attributes to ensure content is perceivable by assistive technologies.

Is focus management included in this skill?

Absolutely. It covers focus order, visible focus indicators, and the new 2.4.11 rule ensuring focused elements aren't obscured by sticky UI elements.

Does it cover mobile-specific accessibility?

Yes, it addresses mobile concerns like touch target sizes (minimum 24x24 CSS pixels) and providing single-pointer alternatives for multi-touch gestures.

What version of WCAG does this skill support?

This skill specifically supports WCAG 2.2, covering Level A and AA criteria, including the newest additions like focus appearance and target size minimums.

WCAG 2.2 Accessibility Guidelines

Name: WCAG 2.2 Accessibility Guidelines
Author: svengraziani

bysvengraziani

•

Design Tools

Applies WCAG 2.2 accessibility standards to web development projects through actionable implementation rules and best practices.

This skill equips Claude with a comprehensive knowledge base of Web Content Accessibility Guidelines (WCAG) version 2.2, enabling the creation and auditing of inclusive digital experiences. It provides specific technical guidance on contrast ratios, semantic HTML5, ARIA implementation, keyboard navigation, and focus management. By incorporating the latest 2.2 criteria—such as minimum target sizes, dragging alternatives, and focus appearance—the skill ensures that frontend code meets Level A and AA compliance standards while improving usability for all users.

Key Features

01Guidance on semantic HTML structure, landmarks, and ARIA patterns

02Keyboard navigation and focus management strategies for complex widgets

03Quick reference guides for text and UI component contrast ratios

04Detailed requirements for new 2.2 additions like target size and focus visibility

052 GitHub stars

06Comprehensive implementation rules for WCAG 2.2 Level A and AA criteria

Use Cases

01Generating accessible UI components with proper screen reader support

02Implementing responsive layouts that support high-zoom reflow and text spacing

03Auditing existing components for accessibility gaps and compliance issues

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add svengraziani/ui-design wcag-2.2

For use in Claude.ai and ChatGPT

Download Skill