WCAG 2.1 Audit Automation & Remediation
Audit digital interfaces against WCAG 2.1 and generate code-level remediation reports
What You Can Do
Conduct comprehensive accessibility audits on digital interfaces from wireframes through production, evaluating against all WCAG 2.1 standards. You'll identify accessibility failures with root cause analysis, receive specific code-level fixes ranked by severity and user impact, and generate compliance documentation that satisfies legal teams, regulators, and accessibility stakeholders. The skill accelerates audit cycles from weeks to days while maintaining consistent evaluation criteria across your organization.
Features
covers Perceivable, Operable, Understandable, and Robust principles
identifies failures at A, AA, and AAA levels with clear distinction between mandatory and optional criteria
explains WHY each criterion fails, not just what failed, with context for remediation
receives specific HTML, CSS, and JavaScript solutions for each failure with implementation guidance
failures organized by user impact severity and remediation effort to guide roadmap planning
generates audit reports and evidence trails suitable for legal review, ADA/Section 508 compliance, and stakeholder communication
audit reusable components and patterns against accessibility standards to catch issues at source
remediation reports provided in multiple formats (markdown, HTML, CSV) for different stakeholders
Example Output
WCAG Audit Report: E-commerce Checkout Flow
Critical (AA Level)
- Form labels missing programmatic association (WCAG 1.3.1 Info & Relationships)
- Failure:
<input type="email">without associated<label> - Fix:
<label for="email">Email address</label><input id="email" type="email"> - Impact: Screen reader users cannot identify field purpose
- Failure:
Major (AA Level)
- Color contrast insufficient on error messages (WCAG 1.4.3 Contrast)
- Current: #777 text on #FFF background = 4.5:1
- Required: 4.5:1 minimum for AA
- Fix: Change text color to #555 = 7:1 contrast
- Impact: Users with low vision cannot read validation feedback
Summary: 12 failures across AA level, 3 at AAA. Est. remediation: 6-8 hours.
What's Included
- SKILL.md instruction file with audit methodology and WCAG criteria reference:
- WCAG 2.1 Audit Checklist: all 50 criteria with plain-language explanations and success criteria
- Remediation Priority Framework: matrix for ranking failures by user impact and effort
- Code Fix Templates: HTML, CSS, and JavaScript patterns for common WCAG failures
- Compliance Report Template: structured format for documenting audit findings and remediation status
Who It's For
- UX/UI Designers — conducting accessibility compliance audits and creating improvement roadmaps
- Product Managers — evaluating accessibility maturity and planning remediation sprints
- Front-end Developers — implementing specific code fixes and validating accessibility solutions
- Accessibility Specialists — documenting compliance evidence for legal/regulatory review
- QA/Testing Teams — establishing baseline accessibility metrics and tracking remediation progress
Best For
- Pre-launch accessibility compliance audits (WCAG AA/AAA certification)
- Responding to accessibility complaints or user reports with root cause fixes
- Evaluating design systems and reusable component libraries for accessibility
- Preparing ADA/Section 508 compliance documentation for legal review
- Training design teams on WCAG criteria application and remediation patterns
You might also like
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
You can generate, test, and iterate on onboarding microcopy that handles the unique constraints of first-run experiences: zero product knowledge assumptions, anxiety management around data entry and permissions, and sequential task dependencies. Claude helps you stress-test copy variants against user objections, anticipate drop-off points, and create messaging that balances education, reassurance, and motivation in minimal word count.
by calesthio
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio