web accessibility website audit
by Rian O'Leary
Full WCAG 2.1 AA accessibility audits with JS rendering, professional client reports, and remediation roadmaps.
- Audit modern JS-heavy sites using Playwright for accurate DOM analysis.
- Generate white-label accessibility reports for agency clients.
- Identify legal liability risks under ADA Title III and the EAA.
$5
One-time purchase · Own forever
Included in download
- Audit modern JS-heavy sites using Playwright for accurate DOM analysis.
- Generate white-label accessibility reports for agency clients.
- terminal, browser, network automation included
- Includes example output and usage patterns
See it in action
# Web Accessibility Audit — example.com **Score: 82/100 — Grade B** · 4 pages · WCAG 2.1 AA · Playwright JS rendering **Findings: 16 Critical · 42 High · 28 Medium** --- ## 🔴 Critical **[WCAG 1.4.3] Color Contrast — AA Normal Text** · Pages: 4/4 Multiple elements fail the 4.5:1 contrast ratio: - Navigation "Products" link: **1.00:1** (invisible) - Hero heading: **2.39:1** - Pricing figure "$49/mo": **1.79:1** **[WCAG 1.1.1] Image Missing Alt Text** · Pages: 1/4 1 image has no alt attribute at all. --- ## 🟠 High **[WCAG 2.4.4] Icon Links Missing Accessible Name** · ×464 SVG icon links have no `aria-label`. Screen reader users can't determine link purpose. **[WCAG 3.3.2] Form Input Missing Label** · ×3 Search inputs have no `<label>` or `aria-label`. --- ## 🟡 Medium - **[WCAG 2.4.1]** Missing skip navigation link - **[WCAG 1.3.1]** Skipped heading level · ×2 - **[WCAG 2.4.4]** Ambiguous link text · ×12 - **[WCAG 1.1.1]** Empty alt without `role="presentation"` · ×8 --- ## 📋 Compliance Checklist ✅ 2.4.2 Page Titled · ✅ 2.4.6 Headings Present · ✅ 3.1.1 Language of Page ❌ 1.1.1 Non-text Content · ❌ 1.3.1 Info and Relationships · ❌ 1.4.3 Contrast · ❌ 2.4.1 Bypass Blocks · ❌ 2.4.4 Link Purpose --- ## 🛠 Remediation Roadmap 1. Color contrast on nav/hero/pricing — **~4-8 hrs** 2. Add aria-label to icon links — **~8-12 hrs** 3. Add labels to search inputs — **~30 min** 4. Skip navigation link — **~30 min** 5. Heading hierarchy + ambiguous links — **~3-5 hrs** --- ## 📊 Page Discovery Source: Homepage links (sitemap returned CAPTCHA) · Found: 102 pages · Audited: 4 ## 🔧 Freelancer Notes - 464 icon links likely includes decorative SVGs — verify before quoting - Pricing page has interactive toggles — needs manual keyboard testing - No forms on blog/contact pages — form checks couldn't run ## 📄 Output Files - `example.com-client-report.md` — full client-ready report - `example.com-freelancer-notes.md` — internal audit notes
web accessibility website audit
by Rian O'Leary
Full WCAG 2.1 AA accessibility audits with JS rendering, professional client reports, and remediation roadmaps.
$5
One-time purchase · Own forever
⚡ Also available via Agensi MCP — your AI agent can load this skill on demand via MCP. Learn more →
Included in download
- Audit modern JS-heavy sites using Playwright for accurate DOM analysis.
- Generate white-label accessibility reports for agency clients.
- terminal, browser, network automation included
- Includes example output and usage patterns
- Instant install
See it in action
# Web Accessibility Audit — example.com **Score: 82/100 — Grade B** · 4 pages · WCAG 2.1 AA · Playwright JS rendering **Findings: 16 Critical · 42 High · 28 Medium** --- ## 🔴 Critical **[WCAG 1.4.3] Color Contrast — AA Normal Text** · Pages: 4/4 Multiple elements fail the 4.5:1 contrast ratio: - Navigation "Products" link: **1.00:1** (invisible) - Hero heading: **2.39:1** - Pricing figure "$49/mo": **1.79:1** **[WCAG 1.1.1] Image Missing Alt Text** · Pages: 1/4 1 image has no alt attribute at all. --- ## 🟠 High **[WCAG 2.4.4] Icon Links Missing Accessible Name** · ×464 SVG icon links have no `aria-label`. Screen reader users can't determine link purpose. **[WCAG 3.3.2] Form Input Missing Label** · ×3 Search inputs have no `<label>` or `aria-label`. --- ## 🟡 Medium - **[WCAG 2.4.1]** Missing skip navigation link - **[WCAG 1.3.1]** Skipped heading level · ×2 - **[WCAG 2.4.4]** Ambiguous link text · ×12 - **[WCAG 1.1.1]** Empty alt without `role="presentation"` · ×8 --- ## 📋 Compliance Checklist ✅ 2.4.2 Page Titled · ✅ 2.4.6 Headings Present · ✅ 3.1.1 Language of Page ❌ 1.1.1 Non-text Content · ❌ 1.3.1 Info and Relationships · ❌ 1.4.3 Contrast · ❌ 2.4.1 Bypass Blocks · ❌ 2.4.4 Link Purpose --- ## 🛠 Remediation Roadmap 1. Color contrast on nav/hero/pricing — **~4-8 hrs** 2. Add aria-label to icon links — **~8-12 hrs** 3. Add labels to search inputs — **~30 min** 4. Skip navigation link — **~30 min** 5. Heading hierarchy + ambiguous links — **~3-5 hrs** --- ## 📊 Page Discovery Source: Homepage links (sitemap returned CAPTCHA) · Found: 102 pages · Audited: 4 ## 🔧 Freelancer Notes - 464 icon links likely includes decorative SVGs — verify before quoting - Pricing page has interactive toggles — needs manual keyboard testing - No forms on blog/contact pages — form checks couldn't run ## 📄 Output Files - `example.com-client-report.md` — full client-ready report - `example.com-freelancer-notes.md` — internal audit notes
About This Skill
Professional Accessibility Auditing for Consultants
Transform raw accessibility data into client-ready compliance reports. This skill automates the labor-intensive process of crawling websites and evaluating them against WCAG 2.1 AA standards. It solves the problem of inaccurate, "flat" audits by employing a specialized Python engine that supports full JavaScript rendering, ensuring modern SPAs and interactive elements are correctly captured.
What it does
- Intelligent Crawling: Samples site-wide pages (Home, Product, Category, Content) to identify systemic accessibility patterns.
- Deep Analysis: Checks 20+ specific WCAG criteria including ARIA roles, color contrast via computed styles, heading hierarchy, and form label associations.
- Dual-Output Reporting: Generates a polished, white-label PDF/Markdown report for stakeholders and a technical "Freelancer Notes" document for remediation.
- Legal Context: Automatically incorporates current ADA Title III and European Accessibility Act (EAA) litigation statistics to highlight business risk.
Why use this skill?
-
Standard LLM prompts often hallucinate accessibility issues because they can't effectively process rendered DOM trees or compute contrast ratios. This skill uses a Python-based audit engine as the "ground truth," while the AI provides the expert interpretation, severity categorization, and remediation code snippets that feel hand-coded by a senior accessibility engineer.
-
The skill cuts out the tedious manual site audit for consultants and produces a ready to go client report, helping accessibility consultants do a 2-3 day job in 5 minutes.
📖 Learn more: Best Frontend & Design Skills for Claude Code →
Use Cases
- Audit modern JS-heavy sites using Playwright for accurate DOM analysis.
- Generate white-label accessibility reports for agency clients.
- Identify legal liability risks under ADA Title III and the EAA.
- Provide developers with specific 'Before/After' fix snippets for WCAG violations.
- Prioritize remediation tasks based on severity and estimated effort.
Known Limitations
The skill uses playwright to render JS websites - can be slow. Large sites may take 5+ minutes from start to finished report. The skill checks and reports on roughly 50-60% of the WCAG 2.1 AA standards. The rest must be checked manually (i.e video captions, keyboard navigation etc) by the consultant.
How to Install
unzip web-accessibility-website-audit.zip -d ~/.claude/skills/Reviews
No reviews yet — be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Early access skill
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review
Permissions
Allowed Hosts
File Scopes
Frequently Asked Questions
Learn More About AI Agent Skills
Similar Skills
code-reviewer
Reviews your code for bugs, security vulnerabilities, logic errors, performance issues, and style violations. Organizes findings by severity and suggests fixes with code examples.
git-commit-writer
Writes conventional commit messages by analyzing your staged git changes. Detects commit type, scope, and breaking changes automatically.
readme-generator
Generates a complete, polished README.md by scanning your actual project structure, dependencies, and code.
pr-description-writer
Writes clear pull request descriptions by analyzing your branch diff. Covers what changed, why, how, and what to test. Works with GitHub, GitLab, and Bitbucket.