accessibility-audit
accessibility-audit is a Claude Code skill that conducts comprehensive WCAG 2.1 AA compliance evaluations across perceivable, operable, understandable, and robust principles. Use it for pre-launch accessibility verification, compliance preparation for ADA or Section 508, systematic remediation after audit findings, or when accessibility is the primary goal, rather than for general QA testing or component-level implementation.
git clone --depth 1 https://github.com/rampstackco/claude-skills /tmp/accessibility-audit && cp -r /tmp/accessibility-audit/dist/pi/.agents/skills/accessibility-audit ~/.claude/skills/accessibility-auditSKILL.md
# Accessibility Audit Run a thorough accessibility audit and produce a remediation plan. Stack-agnostic. Anchored to WCAG 2.1 AA, with notes on AAA where relevant. This skill goes deeper than the accessibility checks in `qa-testing` and `design-standards`. Use this when accessibility itself is the goal. --- ## When to use - Pre-launch accessibility verification - Compliance preparation (ADA, EN 301 549, AODA, Section 508) - Remediation after an audit finding or complaint - Annual or quarterly accessibility health check - Onboarding accessibility into a team that hasn't prioritized it before ## When NOT to use - General QA after deploys (use `qa-testing`) - Component-level accessibility implementation (use `frontend-component-build`) - Color contrast for design tokens (use `design-standards` or `brand-identity`) --- ## Required inputs - The site or product under audit - The scope (full site, specific section, specific user flow) - The target standard (WCAG 2.1 AA is most common) - Any specific concerns or known issues - Tools available (automated scanners, screen readers, manual testing) --- ## The framework: WCAG's 4 principles WCAG organizes accessibility around four principles. The audit covers each in depth. ### 1. Perceivable Information and UI must be presentable in ways users can perceive. **Audit checks:** - **Text alternatives.** All non-decorative images have descriptive `alt` text. Decorative images use `alt=""`. Complex images (charts, infographics) have long descriptions. - **Time-based media.** Videos have captions. Pre-recorded audio has transcripts. Live audio has live captions where required. - **Adaptable.** Content structure is conveyed through markup (semantic HTML), not just visual styling. Reading order makes sense when CSS is disabled. - **Distinguishable.** Color is not the sole means of conveying information. Text contrast meets AA (4.5:1 normal, 3:1 large). UI element contrast meets 3:1. Audio can be paused, stopped, or muted. ### 2. Operable UI components and navigation must be operable. **Audit checks:** - **Keyboard accessible.** All functionality available via keyboard alone. No keyboard traps. Focus visible. - **Enough time.** Time limits can be adjusted, paused, or extended. Auto-updating content can be paused. - **Seizures and physical reactions.** No content that flashes more than 3 times per second. - **Navigable.** Skip links present. Pages have descriptive titles. Focus order is logical. Link purpose clear from text or context. Multiple ways to find pages (sitemap, search, navigation). Headings and labels are descriptive. - **Input modalities.** Pointer gestures have keyboard alternatives. Pointer cancellation supported (mouse-up, not mouse-down for activation). Labels match accessible names. Motion-triggered functionality has alternatives. ### 3. Understandable Information and operation must be understandable. **Audit checks:** - **Readable.** Page language declared (`<html lang="...">`). Unusual words and abbreviations have definitions or expansions. Reading level appropriate to audience. - **Predictable.** Focus does not change context unexpectedly. Input does not change context unexpectedly. Navigation is consistent across pages. Components that look similar behave similarly. - **Input assistance.** Errors are identified clearly. Labels and instructions are provided for input. Error suggestions are given where possible. For pages handling legal commitments or financial transactions, errors can be reviewed and corrected before submission. ### 4. Robust Content must be robust enough to work with current and future user agents. **Audit checks:** - **Compatible.** Markup is valid. Name, role, and value of UI components are programmatically determinable. Status messages can be programmatically determined and announced. --- ## Audit methodology ### Stage 1: Automated scan Run automated scanners across the priority pages. These catch 30 to 50 percent of issues but miss the rest. **Tools:** - axe DevTools (browser extension) - Lighthouse (Chrome DevTools accessibility audit) - WAVE (browser extension) - Pa11y (CLI for batch scanning) **Output:** A list of automated findings, by page. ### Stage 2: Manual keyboard testing Unplug the mouse. Navigate the priority user flows using only keyboard. **Test:** - Tab and Shift+Tab move through interactive elements in logical order - Enter activates buttons and links - Space activates buttons (and toggles checkboxes) - Arrow keys navigate within composite widgets (tabs, menus, listboxes) - Escape dismisses modals, popovers, menus - Focus is always visible - Focus returns to a sensible place after modals or popovers close - No keyboard trap (focus can always leave) **Document:** Any flow where keyboard navigation breaks down. ### Stage 3: Screen reader testing Test with at least one real screen reader. Each combination has quirks. **Common combinations:** - VoiceOver + Safari (macOS / iOS) - NVDA + Firefox or Chrome (Windows) - JAWS + Chrome (Windows; commercial but common in enterprise) - TalkBack + Chrome (Android) **Test:** - Page structure announced correctly (headings, landmarks) - Form labels read with their inputs - Errors announced when they appear - Status changes announced (loading, success, error) - Modal context announced when opened - Images have meaningful alt text (or are correctly identified as decorative) ### Stage 4: Visual testing Verify the visual aspects of accessibility. **Test:** - Color contrast for all text/background pairs (use a contrast checker) - UI element contrast (3:1 for icons, borders, focus rings) - Color-blindness simulation (deuteranopia at minimum) - Zoom to 200% - content remains usable, no horizontal scroll - Reflow at 320px viewport - Text spacing applied (line height, letter spacing) - no content cut off - Motion can be reduced (`prefers-reduced-motion` honored) ### Stage 5: Cognitive accessibility Often overlooked. Critical for
How to produce ad creative that converts at performance scale. Hook patterns, format selection, video pacing, variation systems, sequential testing methodology, fatigue detection, brand-voice alignment without conversion dilution, and platform-specific creative norms. Triggers on ad creative, ad design, hook patterns, ad video pacing, creative testing, ad variations, creative refresh, creative fatigue, refresh ad creative, video ads for Meta, TikTok creative, LinkedIn ad creative, ad asset library. Also triggers when a team is producing creative at scale, planning a creative test cycle, or auditing why creative is not converting.
How to read paid media dashboards without fooling yourself. Attribution models, platform reporting quirks, multi-platform reconciliation, ROAS vs LTV horizon traps, statistical noise in performance metrics, incrementality testing, and the failure modes that produce expensive lessons. Triggers on read paid media dashboard, attribution analysis, ROAS vs LTV, multi-platform reconciliation, ad incrementality, geo holdout, conversion lift study, ghost bidding, paid media reporting, board-deck paid media metrics, blended CAC, MMM, MTA, last-click attribution. Also triggers when a marketer is about to scale, kill, or rebudget a campaign based on platform metrics, or when reconciling platform reports against warehouse revenue.
Run a structured after-action review (postmortem, retrospective) on a launch, incident, or completed project to capture timeline, root cause analysis, contributing factors, and actionable lessons. Use this skill whenever the user wants to run a postmortem, retrospective, AAR, or after-action review on any past event. Triggers on after-action report, AAR, postmortem, retrospective, retro, post-incident review, what went well what didn't, lessons learned, blameless postmortem, root cause analysis, RCA, five whys. Also triggers when the user has just shipped something or just resolved an incident and wants to capture learnings.
How humans and AI compose in content workflows. Where AI legitimately participates, where humans must own, hybrid workflow patterns, voice ownership preservation, the AI slop problem, disclosure and transparency, team calibration, and the ethics of intellectually honest AI-assisted content production. Triggers on AI content workflow, AI-assisted writing, hybrid content production, AI in editorial, AI slop, AI disclosure, AI usage policy, AI content ethics, voice preservation with AI, team AI calibration. Also triggers when content feels generic despite quality tools, when team AI usage has drifted into inconsistency, or when a regulated or trust-sensitive context requires explicit AI policy.
Design measurement frameworks including event taxonomy, KPI hierarchy, dashboard architecture, attribution models, and analytics implementation strategy. Use this skill whenever the user wants to plan analytics, design dashboards, build event taxonomies, define KPIs, set up tracking, or audit existing measurement. Triggers on analytics strategy, measurement plan, event taxonomy, tracking plan, KPI framework, dashboard design, north star metric, attribution model, conversion tracking, GA4 setup, Mixpanel setup, analytics audit. Also triggers when the user has data but no clear way to use it, or wants to make decisions but doesn't know what to track.
Direct visual and creative work for campaigns, photography, illustration, video, and branded experiences. Use this skill whenever the user wants to brief a photographer, direct illustrators, plan a creative campaign, develop visual concepts, write a creative direction document, or evaluate creative work for fit. Triggers on art direction, photo brief, photography brief, illustration brief, campaign concept, creative concept, visual direction, mood board, look and feel, visual treatment, video direction. Also triggers when the user has approved brand identity but needs to extend it into specific creative deliverables.
Plan and run backups, set recovery objectives, and run disaster recovery drills. Use this skill when defining RPO/RTO targets, designing backup architecture, deciding what to back up and how often, planning for full-region or platform outages, or running a restoration drill. Triggers on backup, restore, RPO, RTO, disaster recovery, DR, business continuity, what if the database is gone, what if our hosting goes down, recovery drill, ransomware planning. Also triggers when an incident reveals a gap in restoration capability.
Running closed and open betas that produce real signal. Beta participant selection, structured feedback collection, beta-to-GA decision criteria, and the difference between soft-launch (no structure, no signal), kitchen-sink (everyone in, no actionable feedback), and structured beta (calibrated cohort, intentional feedback loops, clear graduation criteria). Triggers on beta program, alpha test, beta cohort, beta participant, beta feedback, beta to GA decision, design partner, early access program, closed beta, open beta, RC release. Also triggers when a feature is approaching launch and the team needs structured pre-GA validation, when prior betas produced noise rather than signal, or when the team has soft-launched before but wants more structured feedback this time.