- Home
- Skills
- UX & UI Design
- Accessibility & Inclusive Design Review (WCAG 2.2)
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 Agents you already use
Accessibility & 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
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.
Connects securely to your tools. The creator never sees your data.
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.
Cannot evaluate dynamic behavior (focus order, screen reader announcements) from static images. Provides technical guidance, not legal certification.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 1 month ago
Permissions
No special permissions declared or detected