skills.rest
rohitg00
rohitg00COMMUNITY
Explore all skills by this author →
𝕏@ghumare64GitHub

accessibility-wcag

Identify accessibility gaps and enforce WCAG 2.2 patterns on web content.

2.5k|877|Updated Feb 4, 2026
Search Tags:#accessibility#a11y#wcag#contrast#keyboard#semantic-html#aria
One-click install
npx skills add https://github.com/rohitg00/awesome-claude-code-toolkit --skill accessibility-wcag-rohitg00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/rohitg00/awesome-claude-code-toolkit/tree/main/skills/accessibility-wcag
Command: npx skills add https://github.com/rohitg00/awesome-claude-code-toolkit --skill accessibility-wcag-rohitg00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility challenges in UI and web content, including missing landmarks, inaccessible controls, and poor contrast, hinder inclusive user experiences.

Core Features & Use Cases

  • Guidance on semantic HTML and landmarks.
  • ARIA patterns and focus management for modals, tabs, and dialogs.
  • Keyboard navigation, visible focus indicators, and color-contrast recommendations.
  • Checklists for accessibility audits and developer handoffs.

Quick Start

Audit a webpage and apply WCAG 2.2 patterns to improve accessibility.

Frequently Asked Questions about accessibility-wcag

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

FAQPage Schema
How do I audit a webpage for WCAG 2.2 compliance?▼

ARIA patterns manage focus and accessibility for dynamic UI elements like modals, tabs, and dialogs. They ensure keyboard navigation and screen reader compatibility by enforcing proper labeling and focus management when standard semantic HTML cannot handle complex interactions.

What's the best way to fix color-contrast issues for accessible web content?▼

The best way to fix color-contrast issues is to evaluate your UI against WCAG 2.2 contrast scenarios and adjust styles to meet accessibility standards. This ensures inclusive user experiences by making text and controls visually distinguishable for all users.

Does semantic HTML work with ARIA for keyboard navigation?▼

Semantic HTML works with ARIA to establish baseline keyboard navigation and enhance screen reader compatibility. While semantic landmarks structure the page, ARIA patterns handle focus management for dynamic components like modals and dialogs to ensure full keyboard accessibility.

Why does my modal dialog fail screen reader compatibility checks?▼

Modal dialogs fail screen reader compatibility checks when they lack proper ARIA patterns and focus management. Enforcing WCAG 2.2 patterns ensures focus is trapped within the dialog, keyboard navigation is maintained, and correct labeling is provided for assistive technologies.

Related Skills

Explore More Software Engineering Skills→
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced
jens-wedinjens-wedin

a11y-design

Annotate designs into developer-ready accessibility requirements with a reusable template.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
JhabbigJhabbig

wcag-audit-patterns

Audit web interfaces for WCAG 2.2 accessibility violations.

Community
Advanced