frontend-a11y

name	frontend-a11y
description	Deep accessibility (a11y) audit of a webpage or static HTML/CSS, mapped to the full Front-End-Checklist Accessibility category (95 rules) — far beyond the ~12 basic rules in frontend-perfection. Runs offline static checks (Python stdlib, no browser/network) for structure, ARIA validity, headings, landmarks, tables, forms, media tracks, lists, and CSS signals; documents an optional Playwright+axe-core runtime runner for computed contrast, focus order, live regions, modal traps, and reflow; and lists manual screen-reader checks. Use it to audit, fix, or verify accessibility: 'accessibility audit', 'a11y check', 'wcag', 'wcag audit', 'wcag compliance', 'axe', 'contrast check', 'aria', 'screen reader test', 'keyboard navigation', 'keyboard trap', 'focus trap', 'accessibility testing', 'make it accessible', 'check this page for a11y', 'проверь доступность', 'глубокая доступность'. Also triggered when the /frontend orchestrator or mobile-frontend needs the deep a11y domain.
license	MIT
metadata	{"author":"best","version":"1.0.0"}
when_to_use	Use to audit/polish accessibility deeply: 'accessibility audit', 'a11y check', 'wcag', 'wcag audit', 'wcag compliance', 'axe', 'screen reader test', 'contrast check', 'keyboard navigation', 'keyboard trap', 'focus trap', 'aria', 'accessibility testing', 'make it accessible', 'проверь доступность', 'глубокая доступность'. Examples: 'audit this page for WCAG violations', 'check the modal for keyboard traps', 'run axe on the homepage', 'is this contrast accessible'.

frontend-a11y

frontend-perfection owns measurable layout/perf/SEO/tokens polish and only touches ~12 basic a11y rules (img-alt, button/link-name, form-label, aria-valid, landmark-unique, plus lang/dir/headings). This skill owns the deep accessibility domain — the full Front-End-Checklist Accessibility category (95 rules), split into three checkable tiers so the right tool runs at the right time.

• static — offline Python (scripts/a11y_audit.py), no browser, no network. Markup structure, ARIA validity, headings, landmarks, tables, forms, media tracks, lists, and a few CSS signals.
• runtime — Playwright + axe-core (scripts/a11y_axe.mjs, optional npm deps). Computed contrast, ARIA parent/child relationships, live regions, focus order, modal traps, reflow at 400% zoom, touch targets.
• manual — screen-reader testing and human-judgement rules (NVDA/JAWS/ VoiceOver/TalkBack, plain language, seizure flashing). Checklist-only; the report records them as severity: manual so they are not silently skipped.

When to use

• User asks to "audit accessibility", "check WCAG", "run axe", "test keyboard navigation", "find focus traps", "verify contrast", "проверь доступность".
• The /frontend orchestrator routes the a11y domain here; mobile-frontend calls it for touch-target / orientation / reflow checks.
• After frontend-perfection passes its 12 basic rules and you need the other 83.

Composition

• vs frontend-perfection — it owns layout/perf/SEO/tokens + 12 a11y rules (incl. computed contrast). This skill owns the remaining 83 a11y rules. Do NOT re-implement raw-hex token checks or computed-contrast here — those live in frontend-perfection/a11y_axe.mjs. Run frontend-perfection first for the shared baseline, then frontend-a11y for depth.
• vs mobile-frontend — it calls frontend-a11y for the mobile-a11y rules (touch target size, orientation, reflow at 400%, reduced motion).
• vs /frontend — the orchestrator runs frontend-perfection + this skill
  • (optionally) a11y_axe.mjs for the full a11y picture.

Workflow