skills.rest
YuriiYInno
YuriiYInnoCOMMUNITY
Explore all skills by this author →
GitHub

wcag-accessibility

Review and write accessible web interfaces using WCAG 2.2 Level AA rules.

Updated Oct 2, 2025
Search Tags:#code review#accessibility#a11y#screen reader#frontend#wcag#aria
One-click install
npx skills add https://github.com/YuriiYInno/Innogram --skill wcag-accessibility-yuriiyinno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wcag-accessibility
Source: https://github.com/YuriiYInno/Innogram/tree/main/.codex/skills/wcag-accessibility
Command: npx skills add https://github.com/YuriiYInno/Innogram --skill wcag-accessibility-yuriiyinno

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend code often ships with accessibility defects—missing labels, poor contrast, broken keyboard navigation—that block users who rely on screen readers, keyboards, or zoom. This Skill provides 30 prioritized WCAG 2.2 Level AA rules with incorrect/correct code examples so you can detect and fix these issues during code review or component development. ## Core Features & Use Cases - Accessibility Code Review: Audit React, Vue, Angular, or plain HTML against 30 rules across 8 categories (semantic HTML, keyboard/focus, ARIA, color contrast, forms, media, motion, responsive), each tagged by impact level. - Accessible Component Authoring: Follow copy-ready correct patterns for modals with focus traps, labeled form inputs, aria-live regions, and reduced-motion animations. - Use Case: While reviewing a pull request containing a custom dropdown, use the aria-expanded-states and keyboard-focus-trap rules to verify the widget communicates its open state and traps focus correctly. ## Quick Start Ask the AI to review your frontend component or page for WCAG accessibility issues and suggest fixes based on these guidelines.

Frequently Asked Questions about wcag-accessibility

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

FAQPage Schema
How do I review frontend code for WCAG accessibility issues?▼

Check the code against the 30 rules organized into 8 categories: semantic HTML, keyboard and focus, ARIA, color contrast, forms, media, motion, and responsive design. Each rule shows incorrect and correct code examples with its WCAG criterion and impact level.

How to make a modal dialog accessible in React?▼

Use the native <dialog> element with showModal(), which provides focus trapping, Escape key handling, and an inert background automatically. On close, return focus to the trigger element, per WCAG 2.4.3 Focus Order.

What contrast ratio does WCAG AA require for text?▼

WCAG 1.4.3 requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). UI component boundaries and meaningful graphics need at least 3:1 against adjacent colors per WCAG 1.4.11.

Does this work with Tailwind CSS projects?▼

Yes, several rules include Tailwind-specific patterns, such as focus-visible:ring-2 for focus indicators, motion-safe and motion-reduce variants for animations, and min-w-[44px] for touch targets. The guidelines also note which Tailwind gray shades pass AA contrast.

When should I use ARIA attributes versus native HTML?▼

Prefer native HTML elements whenever they provide the needed semantics—a <button> is always better than <div role="button">. Reserve ARIA for custom widgets with no native equivalent, such as tabs, tree views, and comboboxes.

Related Skills

Explore More Software Engineering Skills→
BenavidesMichaelBenavidesMichael

tailwind-best-practices

Standardize Tailwind CSS v4 usage across frontend projects.

Community
Advanced
KhaledaunKhaledaun

accessibility

Audit web pages for WCAG 2.1 compliance using Lighthouse and axe-core.

Community
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced