القائمة
Accessibility validator: WCAG 2.1 AA, EN 301 549, EAA. Triggers: a11y, accessibility, WCAG, EAA, ARIA, contrast, keyboard, screen reader.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/softspark/ai-toolkit --skill a11y-validateيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
HIPAA validator: PHI exposure, audit logging, encryption, access control, BAA refs. Triggers: HIPAA, PHI, healthcare compliance, audit log, BAA.
Direct technical voice for docs, README, user-facing text. Concise/strict modes. Triggers: documentation, README, content, output-mode, voice, prose style.
Detect/generate/debug CI pipeline config (GitHub Actions, GitLab CI). Triggers: CI setup, build pipeline, GitHub Actions config, debug CI, GitLab CI.
عرض SKILL.md
| name | a11y-validate |
| description | Accessibility validator: WCAG 2.1 AA, EN 301 549, EAA. Triggers: a11y, accessibility, WCAG, EAA, ARIA, contrast, keyboard, screen reader. |
| user-invocable | true |
| effort | medium |
| disable-model-invocation | true |
| context | fork |
| agent | frontend-specialist |
| argument-hint | [path] [--scope full|keyboard|contrast|forms|media|aria|motion|mobile|docs] [--standard wcag-2.1-aa|wcag-2.2-aa|en-301-549|eaa] [--severity high|warn|info] [--framework auto|react|next|nuxt|astro|gatsby|sveltekit|remix|angular|vue|react-native|flutter|static] [--output markdown|json] |
| allowed-tools | Read, Grep, Glob, Bash |
$ARGUMENTS
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.
Complements /seo-validate (which only covers SEO-a11y overlap shallowly). Use this skill when the concern is legal accessibility compliance, not search engine ranking.
Standards basis:
--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./a11y-validate # Scan full project, auto-detect framework
/a11y-validate src/ # Scan specific path
/a11y-validate --scope keyboard # Only keyboard + focus checks
/a11y-validate --scope media # Only captions/transcripts/autoplay
/a11y-validate --scope docs # Only EAA accessibility-statement check
/a11y-validate --scope mobile # Only React Native + Flutter patterns
/a11y-validate --standard eaa # Activate EAA documentation category
/a11y-validate --standard wcag-2.2-aa # Add WCAG 2.2 criteria
/a11y-validate --severity high # Filter to HIGH findings
/a11y-validate --framework react-native # Force framework
/a11y-validate --output json # Structured JSON for CI integration
Scopes:
full (default) — all 8 categorieskeyboard — Category 3 onlycontrast — Category 4 onlyforms — Category 5 onlymedia — Category 6 onlyaria — Category 7 onlymotion — Category 8 motion subsectionmobile — Category 8 mobile subsection (React Native / Flutter)docs — Category 8 EAA documentation subsection (fast "are we legally exposed?" scan)Standards:
wcag-2.1-aa (default) — 50 Level A + AA success criteria.wcag-2.2-aa — adds 2.4.11, 2.5.8, 3.2.6, 3.3.7, 3.3.8.en-301-549 — wcag-2.1-aa + mobile chapter + functional-performance statements.eaa — en-301-549 + accessibility-statement documentation requirement (activates Category 8 docs).Severity filtering: --severity high shows only HIGH, --severity warn shows HIGH+WARN, --severity info shows all. Default: all.
package.json, pubspec.yaml, and entry HTML.Grep / Glob / Read against framework-aware patterns for everything the script does not cover.Run detection before scanning. Same logic as /seo-validate plus mobile entries:
| Deps / files contain | Framework | Notes |
|---|---|---|
next | next | App Router uses metadata export |
nuxt | nuxt | useHead() / definePageMeta |
astro | astro | islands model; client:only affects a11y |
gatsby | gatsby | Head API + react-helmet |
@sveltejs/kit | sveltekit | <svelte:head> |
@remix-run/* | remix | MetaFunction |
@angular/core | angular | CDK a11y module expected |
vue (no nuxt) | vue | a11y plugins optional |
react + vite (no next/remix) | react-spa | — |
react-scripts | cra | — |
react-native | react-native | mobile — AccessibilityInfo API |
pubspec.yaml with Flutter SDK | flutter | mobile — Semantics() widget |
| no framework deps | static | raw HTML |
Also detect a11y libraries: @react-aria/*, @reach/*, @angular/cdk/a11y, vue-a11y, svelte-a11y, react-axe, axe-core. Their presence is INFO.
python3 ${CLAUDE_SKILL_DIR}/scripts/a11y-scanner.py [path] [--severity high|warn|info|all] [--output json|text]
Deterministic regex checks over 13 WCAG success criteria — images, headings, language, forms, keyboard, focus, colour contrast, media, ARIA and target size. No framework awareness and no heuristics: what it reports is real, what it misses is Step 3's job. Exit code is non-zero when HIGH findings exist.
Read reference/scanner-categories.md in full,
then work every category in --scope with Grep + Read, skipping only the
success criteria Step 2 already reported. Patterns adapt to the detected framework.
The coverage table under Scanner Reference says which criteria Step 2 handles per category. Everything else in the category is yours.
For each finding:
@react-aria/button" vs "add aria-label").definitive for regex matches, heuristic for co-occurrence / absence / target-size estimation.Present findings sorted by severity (HIGH → WARN → INFO), then file path. State which findings came from the script and which from the manual pass — a reader needs to know how much of the result is deterministic.
scripts/a11y-scanner.py gives a deterministic baseline over 13 WCAG success
criteria. Everything else in each category is a manual pass, and the full pattern
tables for it live in
reference/scanner-categories.md.
| # | Category | Covered by the script | Manual pass |
|---|---|---|---|
| 1 | Semantic Structure & Landmarks | 1.3.1, 3.1.1 | rest of the category |
| 2 | Text Alternatives & Non-Text Content | 1.1.1 | rest of the category |
| 3 | Keyboard & Focus | 2.1.1, 2.4.3, 2.4.7 | rest of the category |
| 4 | Color, Contrast & Visual Cues | 1.4.3 | rest of the category |
| 5 | Forms, Labels & Errors | 3.3.2 | rest of the category |
| 6 | Media (Audio, Video, Embeds) | 1.2.1, 1.2.2, 1.4.2 | rest of the category |
| 7 | ARIA, Live Regions & Dynamic Content | 4.1.2 | rest of the category |
| 8 | Motion, Target Size, Mobile & EAA Docs | 2.5.8 | rest of the category |
The script never covers a whole category. Treat its output as the floor, not the result: a run that reports only script findings has skipped most of WCAG 2.1 AA.
## Accessibility Validation Report
### Summary
| Metric | Value |
|--------|-------|
| Standard | wcag-2.1-aa / wcag-2.2-aa / en-301-549 / eaa |
| Scope | full / keyboard / contrast / forms / media / aria / motion / mobile / docs |
| Framework detected | next / nuxt / astro / ... / react-native / flutter / static |
| Files scanned | N |
| Public routes scanned | N |
| Accessibility statement | found / not-found |
| Findings: HIGH | N |
| Findings: WARN | N |
| Findings: INFO | N |
### Findings
#### [HIGH] src/components/VideoPlayer.tsx:42
Category: Media
Confidence: definitive
Pattern: `<video>` without `<track kind="captions">`
WCAG: 1.2.2 (Captions — Prerecorded, Level AA)
EAA: Article 4 (product/service accessibility requirements)
Fix: Add `<track kind="captions" src="/captions/en.vtt" srclang="en" label="English" default>`. If captions are unavailable, provide a transcript link.
See: reference/wcag-2-1-aa.md#guideline-12-time-based-media
#### [HIGH] public/index.html:8
Category: Viewport & Zoom
Confidence: definitive
Pattern: `<meta name="viewport" content="..., user-scalable=no">`
WCAG: 1.4.4 (Resize Text, Level AA)
Fix: Remove `user-scalable=no` and `maximum-scale=1` from the viewport meta — users must be able to zoom to 200%.
See: reference/wcag-2-1-aa.md#144-resize-text
#### [HIGH] src/routes.tsx:15
Category: EAA Accessibility Documentation
Confidence: heuristic
Pattern: No `/accessibility` / `/accessibility-statement` route detected; footer contains no a11y link
Standard: EAA Article 14 (mandatory accessibility statement)
Fix: Publish an accessibility statement conforming to your member-state template. Link it from the footer of every public page. See reference/eaa-compliance.md for template structure.
Confidence values:
definitive — regex match against a known-bad pattern.heuristic — co-occurrence, absence, ordering, or derived inference (target size from CSS, contrast from hardcoded colors, ATF detection).Exit codes (when --output json):
0 — no HIGH findings.1 — one or more HIGH findings.The skill explicitly does NOT verify the following — pair with runtime tools:
axe-core, Lighthouse, or manual tooling).For these, use: axe-core, pa11y, Lighthouse accessibility audit, manual assistive-tech testing, and user research with disabled participants.
node_modules/, vendor/, dist/, build/, .next/, .nuxt/, .svelte-kit/, ios/Pods/, android/build/, .dart_tool/).--standard eaa is selected is HIGH — this is a regulatory finding, not a code-quality suggestion.scripts/a11y-scanner.py exits 1 when it finds HIGH findings, which is success for this skill, not failure. A wrapper that treats non-zero as an error will report a clean scan on the codebase with the most problems.reference/wcag-2-1-aa.md documents ~50. Reporting only script output looks like a full WCAG 2.1 AA pass and is not one — Step 3 is where most of the standard actually gets checked.oklch(), or a design-token pipeline yields no matches at all, and "no contrast findings" then means "nothing was measurable", not "contrast is fine".alt="" is correct for decorative images and wrong for meaningful ones. The scanner cannot see which is which — it flags missing alt, not useless alt, so a codebase that blanket-added alt="" scans clean while being less accessible than one that omitted the attribute.lang) do not transfer; use reference/mobile-eaa.md instead of reporting the whole category as passing.--standard eaa findings are legal risk with a June 2025 deadline, not code-quality suggestions. Downgrading a missing accessibility statement to WARN because it "isn't a code problem" misreports regulatory exposure.axe-core or Lighthouse against the rendered page instead./seo-validate, category 9.@react-aria, @angular/cdk/a11y).AccessibilityInfo / Flutter Semantics() patterns./seo-validate — SEO scanner; Category 9 covers a11y-for-SEO overlap only. For deep a11y compliance use /a11y-validate./cve-scan — dependency vulnerability scanner./hipaa-validate — HIPAA compliance scanner (similar pattern).