Audit Digital Products for Accessibility Compliance

Accessibility Audit and Testing is a skill that positions the model as an accessibility expert specializing in WCAG compliance, inclusive design and assistive technology compatibility. It conducts comprehensive audits, identifies barriers, provides remediation guidance, and works toward digital products that are accessible to all users. The stated focus is automated testing, manual verification, remediation strategies and establishing ongoing accessibility practices.

The instructions describe a five-step audit flow: confirm scope (platforms, WCAG level, target pages, key user journeys); run automated scans to collect baseline violations and coverage gaps; perform manual checks for keyboard use, screen reader behavior, focus order and contrast; map findings to WCAG criteria, severity and user impact; provide remediation steps and re-test after fixes.

The bundled playbook covers eight areas:

1. Automated testing with axe-core: an AccessibilityAuditor built on Puppeteer that runs axe against the wcag2a, wcag2aa, wcag21a and wcag21aa tags, lets you exclude regions, and computes a score out of 100 by weighting violations by impact (critical, serious, moderate, minor). A jest-axe example shows how to assert no violations in a React component test.
2. Color contrast validation: a ColorContrastAnalyzer that checks text against the AA thresholds (4.5 for normal text, 3 for large) and AAA thresholds (7 and 4.5).
3. Keyboard navigation testing: a tester that finds focusable elements, missing focus indicators and keyboard traps.
4. Screen reader testing: checks for landmarks, heading structure, image accessibility and form accessibility.
5. A manual testing checklist grouped into keyboard, screen reader, visual and cognitive checks.
6. Remediation examples: fixes for missing alt text and missing form labels, an accessible React button and a live region.
7. CI/CD integration: a GitHub Actions workflow that runs axe tests and pa11y, and uploads an HTML report.
8. Reporting: an HTML report generator that shows the score and violations.

The manual checklist is concrete. Keyboard checks include that all interactive elements are reachable with Tab, buttons activate with Enter or Space, Esc closes modals, the focus indicator is always visible and there are no keyboard traps. Visual checks include text resizing to 200 percent without loss, content reflowing at 320px, color not being the sole means of conveying information, and animations that can be paused. Cognitive checks include clear instructions, helpful error messages, no time limits on forms, consistent navigation and reversible important actions.

The CI example runs pa11y against a local server with a strict threshold:

npx pa11y http://localhost:3000 --standard WCAG2AA --threshold 0

Use it when auditing web or mobile experiences for WCAG compliance, identifying accessibility barriers and remediation priorities, establishing ongoing accessibility testing practices, or preparing compliance evidence for stakeholders.

Do not use it when you only need a general UI design review without accessibility scope, when the request is unrelated to user experience or compliance, or when you cannot access the UI, design artifacts or content. The skill also states that its output is not a substitute for environment-specific validation, testing or expert review, and that you should stop and ask if required inputs, permissions, safety boundaries or success criteria are missing.

The input is the audit request, supplied as the skill's arguments, along with access to the UI, design artifacts or content. The scope to confirm is the platforms, the WCAG level, the target pages and the key user journeys.

The output has five parts: an accessibility score for overall compliance with WCAG levels, a violation report with severity and fixes, test results from automated and manual testing, a remediation guide with step-by-step fixes for each issue, and code examples showing accessible component implementations.

The playbook examples use axe-core through Puppeteer, jest-axe with React Testing Library, pa11y, and GitHub Actions for CI. The examples are written in JavaScript.

Front-end developers, QA engineers and product teams who need to check a site or app against WCAG, fix the barriers found, and keep accessibility testing running in CI.