skills.rest
Fabric-Pro
Fabric-ProOFFICIAL
Explore all skills by this author →
WebsiteGitHub

accessibility-wcag

Implements WCAG 2.1/2.2 accessibility patterns for semantic HTML, ARIA, and keyboard navigation.

3|Updated Aug 26, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#wcag#semantic html#focus management#aria
One-click install
npx skills add https://github.com/Fabric-Pro/fabric-oss --skill accessibility-wcag-fabric-pro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/Fabric-Pro/fabric-oss/tree/main/.cursor/skills/accessibility-wcag
Command: npx skills add https://github.com/Fabric-Pro/fabric-oss --skill accessibility-wcag-fabric-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often exclude users with disabilities due to missing ARIA attributes, poor keyboard support, and non-semantic markup. This Skill provides concrete patterns and code examples for building interfaces that meet WCAG 2.1/2.2 compliance standards. ## Core Features & Use Cases - Semantic HTML & ARIA Patterns: Ready-to-use markup examples for landmarks, labels, roles, and live regions. - Keyboard & Focus Management: React/TypeScript snippets for Escape-key handling, focus trapping, and focus indicators in modals and dialogs. - Compliance Guidance: The POUR principles (Perceivable, Operable, Understandable, Robust) mapped to practical implementation decisions. - Use Case: When building a modal dialog component, apply the provided focus-management and aria-modal patterns so screen reader and keyboard users can interact with it correctly. ## Quick Start Ask the AI to review your form or dialog component for WCAG 2.1 AA compliance and add the required ARIA attributes and keyboard handlers.

Frequently Asked Questions about accessibility-wcag

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

FAQPage Schema
How do I make a modal dialog accessible with keyboard navigation?▼

Add role="dialog" and aria-modal="true" to the container, listen for the Escape key to close it, and move focus to the first focusable element inside when it opens. Query focusable elements with a selector covering buttons, links, inputs, and tabindex attributes.

How to add ARIA labels to buttons and form inputs?▼

Use aria-label for icon-only buttons like a close button, aria-describedby to link inputs to error messages, and aria-label on nav elements to distinguish multiple navigation regions. Prefer visible text labels over ARIA whenever possible.

What is the difference between WCAG 2.1 and 2.2 compliance?▼

WCAG 2.2 extends 2.1 with additional success criteria such as focus appearance, dragging movements, and target size minimums. Both are organized around the POUR principles and conformance levels A, AA, and AAA.

Does semantic HTML replace the need for ARIA attributes?▼

Semantic HTML elements like header, nav, main, and button carry implicit roles and should be used first. ARIA is only needed when native elements cannot express the required behavior, such as custom widgets or live regions with aria-live.

Which tools test web accessibility for screen readers?▼

axe DevTools automates detection of common WCAG violations in the browser. Manual testing with screen readers like NVDA, JAWS, or VoiceOver is required to verify real keyboard navigation and announcement behavior.

Related Skills

Explore More Software Engineering Skills→
BrunoAMSilvaBrunoAMSilva

interface-design

Plan UI systems and define UX flows for software interfaces.

Community
Advanced
Eng-susoEng-suso

wcag-audit-patterns

Audit web content against WCAG 2.2 criteria with automated scans and manual verification checklists.

Community
Intermediate
jacocanetejacocanete

review-accessibility

Audit React and Tailwind codebases for accessibility issues and generate a prioritized report.

Community
Advanced
ChoreShoreChoreShore

compound-components

Design accessible UI primitives with ARIA roles and keyboard navigation.

Official
Advanced