Accessibility & Inclusive Design Review (WCAG 2.2)
WCAG 2.2 AA review with measured contrast ratios, target-size math and a dev-ready remediation table.
$7
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsAccessibility & Inclusive Design Review (WCAG 2.2)
Example session with this skill installed
Run an accessibility audit on this login form screenshot. Target WCAG 2.2 AA. The audience is general public, including elderly users.
- Read your context and instructions
- Compiled the accessibility & inclusive
- Generated the UI component
I have completed the accessibility review for the login form. The design currently fails WCAG 2.2 AA due to 2 Critical and 1 Serious barrier.
Accessibility Remediation Report
Executive Summary: Does not meet WCAG 2.2 AA. Found 2 Critical and 1 Serious barriers. Primary issues involve contrast and target size.
| ID | Criterion | Location | Barrier | Severity | Fix | Effort |
|---|---|---|---|---|---|---|
| 1 | 1.4.3 Contrast (Min) | "Forgot Password" link | Light grey on white (2.1:1). Users with low vision cannot read the link. | Critical | Change color from #A0A0A0 to #656565 (4.6:1 ratio). | Low (CSS) |
| 2 | 2.5.8 Target Size | Checkbox for "Remember Me" | Target is 16x16px. Users with motor impairments will struggle to tap. | Serious | Increase touch target area to 24x24px minimum or add 8px padding. | Low (CSS) |
| 3 | 3.3.2 Labels/Instructions | Email/Password fields | Placeholder text used instead of labels. Screen readers may skip fields. | Critical | Add visible <label> elements programmatically linked via for/id. | Med (HTML) |
| 4 | 1.1.1 Non-text Content | Submit Arrow Icon | Missing accessible name. Screen reader hears "Button". | Moderate | Add aria-label="Sign In" to the button element. | Low (HTML) |
Contrast Analysis
- Primary Button: #0055FF on white (5.2:1) - PASS
- Error Text: #FF0000 on white (4.0:1) - FAIL. Suggested fix: #D90000 (4.5:1).
Inclusive & Cognitive Review
- Reading Level: Grade 6. Suitable for general public and elderly users.
Inclusive Design: The form uses a binary "Gender" dropdown (Optional). Recommendation: Change to open text or add "Non-binary/Prefer not to say".
Next steps
- Update the CSS for the "Forgot Password" link and Error text using the suggested HEX codes.
- Wrap input fields in standard label tags to ensure screen reader compatibility.
- Test the updated form with a keyboard-only user to verify focus styles.
accessibility-inclusive-design-review-wc.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
The problem
Automated accessibility tools only catch about 30% of failures. Designers and developers struggle to manually verify WCAG 2.2 compliance, cognitive load, and inclusive UX without deep specialized knowledge.
What it does
- Performs detailed audits against WCAG 2.2 AA standards including Perceivable, Operable, Understandable, and Robust criteria.
- Calculates exact color contrast ratios and provides specific HEX code corrections that meet thresholds while maintaining brand hue.
- Evaluates physical interaction barriers like target sizes (24x24px / 44x44px) and single-pointer alternatives for dragging.
- Analyzes non-technical factors like reading level, cognitive load, and inclusive content patterns for gender or names.
- Generates a prioritized remediation table with specific severity ratings, implementation fixes, and assigned owners.
Why this beats prompting it yourself
Generic prompts often miss the nuances of WCAG 2.2's newest criteria or fail to provide actionable math for contrast and target sizes. This skill uses a systematic checklist and specific templates to ensure no barrier is skipped, providing the exact alt-text and code-level fixes a developer needs to ship.
Use cases
- Reviewing Figma screenshots or handoff files before development begins.
- Auditing existing HTML pages or component libraries for ADA and Section 508 compliance.
- Checking K-12 educational software for age-appropriate reading levels and cognitive load.
- Ensuring mobile app touch targets and motion settings are inclusive for all users.
Known limitations
Cannot evaluate focus order, ARIA attributes, or reflow behavior from static screenshots. This review is a technical audit, not a legal opinion for compliance certification.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 8 days ago
- Passed all security checks, Safe to install