accessibility-auditing
$
npx mdskill add elophanto/EloPhanto/accessibility-auditingEnforce WCAG 2.2 compliance through automated scans and manual assistive testing.
- Detects barriers for users relying on screen readers or keyboard navigation.
- Integrates axe-core, Lighthouse, and browser automation for comprehensive checks.
- Prioritizes critical failures by cross-referencing WCAG guidelines and ARIA standards.
- Generates detailed reports highlighting specific violations and remediation steps.
SKILL.md
.github/skills/accessibility-auditingView on GitHub ↗
--- name: accessibility-auditing description: Audit interfaces against WCAG 2.2 standards, test with assistive technologies, and ensure inclusive design beyond what automated tools catch. Adapted from msitarzewski/agency-agents. --- ## Triggers - accessibility audit - WCAG compliance - screen reader testing - keyboard navigation - accessibility check - a11y audit - ARIA review - color contrast - assistive technology - inclusive design - focus management - alt text review - accessible components - Section 508 - accessibility remediation ## Instructions ### Automated Baseline Scan - Run axe-core against all pages using `shell_execute`: `npx @axe-core/cli [url] --tags wcag2a,wcag2aa,wcag22aa` - Run Lighthouse accessibility audit - Check color contrast across the design system - Review heading hierarchy and landmark structure - Identify all custom interactive components for manual testing - Use `browser_navigate` to inspect pages visually ### Manual Assistive Technology Testing - Navigate every user journey with keyboard only -- no mouse - Complete all critical flows with a screen reader (VoiceOver on macOS, NVDA on Windows) - Test at 200% and 400% browser zoom for content overlap and horizontal scrolling - Enable reduced motion and verify animations respect `prefers-reduced-motion` - Enable high contrast mode and verify content remains visible and usable ### Component-Level Deep Dive - Audit every custom interactive component against WAI-ARIA Authoring Practices - Verify form validation announces errors to screen readers - Test dynamic content (modals, toasts, live updates) for proper focus management - Check all images, icons, and media for appropriate text alternatives - Validate data tables for proper header associations ### Standards-Based Assessment - Always reference specific WCAG 2.2 success criteria by number and name - Classify severity: Critical, Serious, Moderate, Minor - Never rely solely on automated tools -- they miss focus order, reading order, ARIA misuse, cognitive barriers - Push for semantic HTML before ARIA -- the best ARIA is the ARIA you don't need - Consider the full spectrum: visual, auditory, motor, cognitive, vestibular, situational disabilities ### Report and Remediation - Document every issue with WCAG criterion, severity, evidence, and fix - Prioritize by user impact -- a missing form label blocks task completion - Provide code-level fix examples, not just descriptions - Use `knowledge_write` to store remediation patterns - Schedule re-audit after fixes are implemented ## Deliverables ### Accessibility Audit Report Template ```markdown # Accessibility Audit Report ## Audit Overview **Product/Feature**: [Name and scope] **Standard**: WCAG 2.2 Level AA **Date**: [Audit date] **Tools Used**: [axe-core, Lighthouse, screen reader(s), keyboard testing] ## Testing Methodology **Automated Scanning**: [Tools and pages scanned] **Screen Reader Testing**: [VoiceOver/NVDA/JAWS -- OS and browser versions] **Keyboard Testing**: [All interactive flows tested keyboard-only] **Visual Testing**: [Zoom 200%/400%, high contrast, reduced motion] ## Summary **Total Issues Found**: [Count] - Critical: [Count] -- Blocks access entirely for some users - Serious: [Count] -- Major barriers requiring workarounds - Moderate: [Count] -- Causes difficulty but has workarounds - Minor: [Count] -- Annoyances that reduce usability **WCAG Conformance**: DOES NOT CONFORM / PARTIALLY CONFORMS / CONFORMS **Assistive Technology Compatibility**: FAIL / PARTIAL / PASS ## Issues Found ### Issue 1: [Descriptive title] **WCAG Criterion**: [Number -- Name] (Level A/AA/AAA) **Severity**: Critical / Serious / Moderate / Minor **User Impact**: [Who is affected and how] **Location**: [Page, component, or element] **Current State**: [code snippet] **Recommended Fix**: [code snippet] **Testing Verification**: [How to confirm the fix works] ## What's Working Well - [Positive findings -- reinforce good patterns] ## Remediation Priority ### Immediate (Critical/Serious -- fix before release) ### Short-term (Moderate -- fix within next sprint) ### Ongoing (Minor -- address in regular maintenance) ``` ### Keyboard Navigation Checklist ```markdown ## Global Navigation - [ ] All interactive elements reachable via Tab - [ ] Tab order follows visual layout logic - [ ] Skip navigation link present and functional - [ ] No keyboard traps - [ ] Focus indicator visible on every interactive element - [ ] Escape closes modals, dropdowns, overlays - [ ] Focus returns to trigger element after modal closes ``` ## Success Metrics - Products achieve genuine WCAG 2.2 AA conformance, not just passing automated scans - Screen reader users can complete all critical user journeys independently - Keyboard-only users can access every interactive element without traps - Accessibility issues caught during development, not after launch - Teams build accessibility knowledge and prevent recurring issues - Zero critical or serious accessibility barriers in production releases ## Verify - An automated accessibility scanner (axe, Lighthouse, pa11y, or equivalent) was actually run; the report is attached or summarized with rule IDs - Every flagged violation carries a WCAG success-criterion reference (e.g., 1.4.3, 2.4.7), not a vague 'a11y issue' - Keyboard-only walkthrough of the affected flow was performed end-to-end; tab order is documented - Screen-reader output (VoiceOver, NVDA, TalkBack) was sampled on at least one critical control and the announced text is recorded - Color-contrast ratios for new text/icons are reported as numbers (e.g., 4.7:1) against the WCAG AA threshold - Fixes were re-scanned after applying; the second-pass report shows zero regressions on previously-passing checks
More from elophanto/EloPhanto
- 12-principles-of-animationAudit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animations, or checking animation quality. Outputs file:line findings.
- agency-phase-0-discoveryIntelligence and discovery phase — validate opportunity before committing resources. Adapted from msitarzewski/agency-agents.
- agency-phase-1-strategyStrategy and architecture phase — define what to build, how to structure it, and what success looks like. Adapted from msitarzewski/agency-agents.
- agency-phase-2-foundationFoundation and scaffolding phase — build technical and operational foundation before feature development. Adapted from msitarzewski/agency-agents.
- agency-phase-3-buildBuild and iterate phase — implement all features through continuous Dev-QA loops with orchestrated multi-agent sprints. Adapted from msitarzewski/agency-agents.
- agency-phase-4-hardeningQuality and hardening phase — the final quality gauntlet proving production readiness with evidence. Adapted from msitarzewski/agency-agents.
- agency-phase-5-launchLaunch and growth phase — coordinate go-to-market execution across all channels for maximum impact. Adapted from msitarzewski/agency-agents.
- agency-phase-6-operateOperate and evolve phase — sustained operations with continuous improvement for live products. Adapted from msitarzewski/agency-agents.
- agency-strategyNEXUS multi-agent orchestration strategy — the complete operational playbook for coordinating specialized AI agents across project phases. Adapted from msitarzewski/agency-agents.
- agent-activationAgent activation prompts and templates for spawning specialized agents within the NEXUS pipeline. Adapted from msitarzewski/agency-agents.