skills.rest
avel123111
avel123111COMMUNITY
Explore all skills by this author →
GitHub

design-accessibility-review

Audit designs and pages for WCAG 2.1 AA accessibility compliance.

Updated May 26, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#audit#wcag#color contrast
One-click install
npx skills add https://github.com/avel123111/triplanio --skill design-accessibility-review-avel123111
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-accessibility-review
Source: https://github.com/avel123111/triplanio/tree/main/.claude/skills/design-accessibility-review
Command: npx skills add https://github.com/avel123111/triplanio --skill design-accessibility-review-avel123111

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs and pages often ship with accessibility barriers like low color contrast, missing keyboard support, or absent screen reader labels. This Skill runs a structured WCAG 2.1 AA audit so issues are caught and prioritized before handoff. ## Core Features & Use Cases - WCAG 2.1 AA Checklist Audit: Reviews Perceivable, Operable, Understandable, and Robust criteria including contrast ratios, keyboard navigation, focus indicators, and ARIA roles. - Structured Findings Report: Outputs severity-ranked findings tables, color contrast checks, keyboard navigation maps, and screen reader behavior notes. - Use Case: Before handing off a new checkout page design, run the audit to verify 4.5:1 text contrast, 44x44px touch targets, and logical tab order, then get a prioritized fix list for the team. ## Quick Start Ask the assistant to audit the accessibility of your Figma design or page URL against WCAG 2.1 AA and list the critical issues.

Frequently Asked Questions about design-accessibility-review

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

FAQPage Schema
How do I audit a design for WCAG 2.1 AA accessibility?▼

Provide a Figma URL, page URL, or description and the audit checks all four WCAG principles: Perceivable, Operable, Understandable, and Robust. It returns findings in severity-ranked tables with specific WCAG criteria and fix recommendations.

What accessibility issues does an automated audit catch?▼

Automated scans catch roughly 30% of issues, including insufficient color contrast, missing form labels, missing alt text, and absent ARIA landmarks. Keyboard traps and screen reader behavior still require manual testing with tools like VoiceOver or NVDA.

What color contrast ratio is required for WCAG AA?▼

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Non-text UI components and graphics need at least 3:1 contrast against adjacent colors.

Can the audit check keyboard navigation and touch targets?▼

Yes, the audit verifies that all functionality is keyboard accessible, focus order is logical, focus indicators are visible, and touch targets are at least 44x44 CSS pixels. Results are reported in dedicated keyboard navigation tables.

What are the limitations of an AI accessibility audit?▼

The audit is a strong starting point but cannot fully replace manual testing with real assistive technology like VoiceOver or NVDA. Issues like focus traps in modals and unpredictable dynamic behavior often require hands-on verification.

Related Skills

Explore More Design & Creative Skills→
speqqaispeqqai

figma-implement-design

Translate Figma design artifacts into production-ready React UI code.

Official
Advanced
hpsgdhpsgd

accessibility-audit

Audit web UI codebases for WCAG 2.1 AA compliance and generate remediation reports.

Official
Advanced
Eng-susoEng-suso

screen-reader-testing

Test web applications with VoiceOver, NVDA, JAWS, and TalkBack screen readers.

Community
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced