a11y-validate
starsforks
How to install a11y-validate?
softspark/ai-toolkit/a11y-validate
$npx -y skills add softspark/ai-toolkit --skill a11y-validateAccessibility validator: WCAG 2.1 AA, EN 301 549, EAA. Triggers: a11y, accessibility, WCAG, EAA, ARIA, contrast, keyboard, screen reader.
SKILL.md
| 1 | # /a11y-validate — Accessibility & EAA Compliance Scanner |
| 2 | |
| 3 | $ARGUMENTS |
| 4 | |
| 5 | Scan a codebase for accessibility issues using pattern-matching heuristics. Detects violations of **WCAG 2.1 Level AA**, **EN 301 549** (the EU harmonized accessibility standard), and the **European Accessibility Act** (Directive (EU) 2019/882, "EAA", in force since 28 June 2025). Read-only — never modifies files. |
| 6 | |
| 7 | Complements `/seo-validate` (which only covers SEO-a11y overlap shallowly). Use this skill when the concern is legal accessibility compliance, not search engine ranking. |
| 8 | |
| 9 | **Standards basis**: |
| 10 | - **WCAG 2.1** Level A + AA — W3C Recommendation 2018 (updated 2023). |
| 11 | - **WCAG 2.2** Level AA (opt-in via `--standard wcag-2.2-aa`) — adds 2.4.11 focus not obscured, 2.5.8 target size minimum, 3.2.6 consistent help, 3.3.7 redundant entry, 3.3.8 accessible authentication. |
| 12 | - **EN 301 549 v3.2.1** — EU harmonized standard; aligned with WCAG 2.1 AA plus additional chapters for mobile, hardware, ICT procurement, authoring tools, and functional-performance statements. |
| 13 | - **EAA / Directive (EU) 2019/882** — legal framework requiring EN 301 549 conformance for consumer-facing digital products and services in EU markets. Deadline: **28 June 2025**. Requires accessibility statements per member-state templates. |
| 14 | |
| 15 | ## Usage |
| 16 | |
| 17 | ``` |
| 18 | /a11y-validate # Scan full project, auto-detect framework |
| 19 | /a11y-validate src/ # Scan specific path |
| 20 | /a11y-validate --scope keyboard # Only keyboard + focus checks |
| 21 | /a11y-validate --scope media # Only captions/transcripts/autoplay |
| 22 | /a11y-validate --scope docs # Only EAA accessibility-statement check |
| 23 | /a11y-validate --scope mobile # Only React Native + Flutter patterns |
| 24 | /a11y-validate --standard eaa # Activate EAA documentation category |
| 25 | /a11y-validate --standard wcag-2.2-aa # Add WCAG 2.2 criteria |
| 26 | /a11y-validate --severity high # Filter to HIGH findings |
| 27 | /a11y-validate --framework react-native # Force framework |
| 28 | /a11y-validate --output json # Structured JSON for CI integration |
| 29 | ``` |
| 30 | |
| 31 | **Scopes:** |
| 32 | - `full` (default) — all 8 categories |
| 33 | - `keyboard` — Category 3 only |
| 34 | - `contrast` — Category 4 only |
| 35 | - `forms` — Category 5 only |
| 36 | - `media` — Category 6 only |
| 37 | - `aria` — Category 7 only |
| 38 | - `motion` — Category 8 motion subsection |
| 39 | - `mobile` — Category 8 mobile subsection (React Native / Flutter) |
| 40 | - `docs` — Category 8 EAA documentation subsection (fast "are we legally exposed?" scan) |
| 41 | |
| 42 | **Standards:** |
| 43 | - `wcag-2.1-aa` (default) — 50 Level A + AA success criteria. |
| 44 | - `wcag-2.2-aa` — adds 2.4.11, 2.5.8, 3.2.6, 3.3.7, 3.3.8. |
| 45 | - `en-301-549` — wcag-2.1-aa + mobile chapter + functional-performance statements. |
| 46 | - `eaa` — en-301-549 + accessibility-statement documentation requirement (activates Category 8 docs). |
| 47 | |
| 48 | **Severity filtering:** `--severity high` shows only HIGH, `--severity warn` shows HIGH+WARN, `--severity info` shows all. Default: all. |
| 49 | |
| 50 | ## What This Command Does |
| 51 | |
| 52 | 1. **Detect framework** from `package.json`, `pubspec.yaml`, and entry HTML. |
| 53 | 2. **Scan the codebase** using `Grep` / `Glob` / `Read` against framework-aware patterns per category in scope. |
| 54 | 3. **Interpret findings** with specific fixes tied to the detected framework. |
| 55 | 4. **Report** findings sorted by severity with WCAG / EN 301 549 citations. |
| 56 | |
| 57 | ## Steps |
| 58 | |
| 59 | ### Step 1: Detect Framework |
| 60 | |
| 61 | Run detection before scanning. Same logic as `/seo-validate` plus mobile entries: |
| 62 | |
| 63 | | Deps / files contain | Framework | Notes | |
| 64 | |---|---|---| |
| 65 | | `next` | `next` | App Router uses `metadata` export | |
| 66 | | `nuxt` | `nuxt` | `useHead()` / `definePageMeta` | |
| 67 | | `astro` | `astro` | islands model; `client:only` affects a11y | |
| 68 | | `gatsby` | `gatsby` | Head API + react-helmet | |
| 69 | | `@sveltejs/kit` | `sveltekit` | `<svelte:head>` | |
| 70 | | `@remix-run/*` | `remix` | `MetaFunction` | |
| 71 | | `@angular/core` | `angular` | CDK `a11y` module expected | |
| 72 | | `vue` (no nuxt) | `vue` | a11y plugins optional | |
| 73 | | `react` + `vite` (no next/remix) | `react-spa` | — | |
| 74 | | `react-scripts` | `cra` | — | |
| 75 | | `react-native` | `react-native` | mobile — AccessibilityInfo API | |
| 76 | | `pubspec.yaml` with Flutter SDK | `flutter` | mobile — `Semantics()` widget | |
| 77 | | no framework deps | `static` | raw HTML | |
| 78 | |
| 79 | Also detect a11y libraries: `@react-aria/*`, `@reach/*`, `@angular/cdk/a11y` |
People who liked this also viewed
6 picksType
- tddSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeSkillsJul 2026
- qaSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidenceSkillsJul 2026
- webapp-testingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser lSkillsJul 2026
- playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, teSkillsJul 2026
