skills.rest
karenrebecag
karenrebecagCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

accessibility-wcag

Implements WCAG 2.2 accessibility patterns for ARIA, keyboard navigation, and screen readers.

Updated Sep 17, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#react#wcag#semantic html#aria
One-click install
npx skills add https://github.com/karenrebecag/spec-driven-standards --skill accessibility-wcag-karenrebecag
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/karenrebecag/spec-driven-standards/tree/main/plugins/experience/skills/accessibility-wcag
Command: npx skills add https://github.com/karenrebecag/spec-driven-standards --skill accessibility-wcag-karenrebecag

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often exclude users who rely on screen readers, keyboards, or other assistive technologies because developers miss ARIA attributes, semantic HTML, and contrast requirements. This Skill provides concrete, copy-ready patterns for building WCAG 2.2 compliant components. ## Core Features & Use Cases - ARIA Component Patterns: Ready-made implementations for modals, tabs, and forms with correct roles, aria-labelledby, and focus management. - Keyboard Navigation: Arrow-key, Home/End, and Escape handling logic for composite widgets like tab lists. - Contrast & Focus Styling: CSS tokens meeting WCAG AA ratios (4.5:1 normal text, 3:1 large text) with visible focus indicators. - Use Case: When building a React settings page with tabs and a modal dialog, apply these patterns so keyboard-only and VoiceOver users can navigate, activate, and dismiss every element. ## Quick Start Review my React form component and make it accessible according to WCAG 2.2 guidelines.

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 React modal accessible to screen readers?▼

Add role="dialog" and aria-modal="true" to the container, label it with aria-labelledby pointing to the title element, and close it on the Escape key. Icon-only close buttons need an aria-label, with the icon itself marked aria-hidden.

How to implement keyboard navigation for tabs in React?▼

Use role="tablist", role="tab", and role="tabpanel" with matching aria-controls and aria-labelledby pairs. Handle ArrowLeft/ArrowRight to move between tabs, Home/End to jump to ends, and set tabIndex so only the active tab is focusable.

What color contrast ratio does WCAG AA require?▼

WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18px bold or 24px regular). Never rely on color alone to convey errors; pair color with an icon or text prefix.

Should I use aria-label when an element already has visible text?▼

No. Adding aria-label when visible text already labels the element is an anti-pattern that can cause screen readers to announce conflicting names. Reserve aria-label for icon-only controls without visible text.

How do I test a page for accessibility compliance?▼

Navigate the entire page with keyboard only (Tab, Enter, Escape, arrows) and verify every interactive element is reachable with a visible focus indicator. Then test with a screen reader such as VoiceOver or NVDA and check the provided checklist items.

Related Skills

Explore More Software Engineering Skills→
schalkneethlingschalkneethling
7

semantic-html

Reviews HTML markup and converts it to accessible, semantically correct code.

Community
Basic
hffmnnjhffmnnj
39

accessibility-testing

Run automated and manual accessibility tests with axe-core and Lighthouse.

Community
Intermediate
kanopikanopi
16

responsive-styling

Generate mobile-first CSS/SCSS with WCAG AA accessibility and breakpoints.

Official
Advanced
MolcajeteAIMolcajeteAI
2

radix-ui-patterns

Generate accessible Radix UI component patterns with TypeScript examples.

Official
Intermediate