a11y

Audits source code or live URLs against WCAG 2.1 AA and generates scored accessibility reports.

Updated Mar 22, 2026
One-click install
npx skills add https://github.com/fullya99/simple-blog-page --skill a11y-fullya99
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y
Source: https://github.com/fullya99/simple-blog-page/tree/main/.claude/skills/gstack/a11y
Command: npx skills add https://github.com/fullya99/simple-blog-page --skill a11y-fullya99

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web applications often ship with accessibility barriers—missing alt text, unlabeled form inputs, broken heading hierarchy, poor keyboard support—that exclude users relying on assistive technologies. Manually auditing against WCAG 2.1 AA criteria is slow and error-prone. This Skill automates the audit and produces a structured, scored report with concrete fixes. ## Core Features & Use Cases - Source Code Audit: Scans JSX, TSX, Vue, and Svelte files for missing alt attributes, unlabeled interactive elements, heading hierarchy violations, ARIA misuse, and missing keyboard handlers. - Live URL Audit: Navigates to a running page with a headless browser binary, injects JavaScript checks for contrast, focus indicators, and form labels, and captures screenshots for visual review. - Scored Report Generation: Writes a dated Markdown report to .gstack/a11y-reports/ with a 0-100 score, severity-ranked issues (Critical/High/Medium/Low), WCAG criterion references, and specific fix recommendations. - Use Case: Before releasing a new Next.js feature, run the audit to catch unlabeled icon buttons and missing prefers-reduced-motion support, then hand the report to developers as an actionable remediation list. ## Quick Start Run an accessibility audit on this project's source files and generate a WCAG 2.1 AA compliance report with a score and prioritized fixes.

Frequently Asked Questions about a11y

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

FAQPage Schema
How do I audit my website for WCAG 2.1 AA accessibility?▼

Run the audit against your source files or a live URL. It checks images for alt text, interactive elements for accessible names, heading hierarchy, form labels, keyboard support, and ARIA usage, then generates a scored report with severity levels and fixes.

How to check accessibility in React JSX and TSX components?▼

The source audit mode scans all .tsx, .jsx, .vue, and .svelte files using grep patterns to find img tags without alt, buttons without aria-label, inputs without labels, and onClick handlers missing keyboard equivalents.

Can I audit a live website URL for accessibility issues?▼

Yes, providing a URL switches to live audit mode, which uses a headless browse binary to inject JavaScript checks for missing alt attributes, unlabeled buttons, heading structure, and focus indicators, plus captures a screenshot for visual review.

Does the accessibility audit modify my source code?▼

No, the audit is strictly read-only. It reports each issue with a file and line reference, the violated WCAG criterion, and a concrete fix suggestion, but never changes any files.

How is the accessibility score calculated in the report?▼

The score starts at 100 and deducts points per issue by category: missing alt text, unlabeled interactive elements, skipped heading levels, unlabeled inputs, contrast problems, keyboard traps, ARIA misuse, and missing prefers-reduced-motion support.

What are the limitations of automated WCAG accessibility testing?▼

Automated checks cannot fully verify color contrast ratios, meaningful alt text quality, or real screen reader behavior. The audit flags uncertain contrast cases as 'Verify manually' and targets WCAG 2.1 AA rather than AAA criteria.