Menu
Live browser accessibility testing with Playwright and axe-core against a running URL. Use when validating real rendered accessibility behavior.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Accessibility audit for WCAG 2.1 AA, keyboard support, ARIA usage, and semantic HTML. Use when reviewing React/Next.js UI accessibility.
Orchestrate selected audit roles with fresh sub-agents, configurable model tier, and optional --dry-run/--debug validation. Use when running full multi-role audits.
DevOps and production-readiness audit for observability, resilience, scalability, and deployment hygiene. Use when reviewing operational risk before release.
DRY and abstraction audit for duplication, reusable hooks/components, and maintainability patterns. Use when looking for refactor opportunities.
Principal Engineer audit covering architecture, code quality, React/Next.js patterns, and tech debt. Use for senior-level maintainability reviews.
Security audit for OWASP Top 10 risks, auth flaws, injection vectors, and secret handling. Use when validating exploitable application security issues.
| name | audit-a11y-browser |
| description | Live browser accessibility testing with Playwright and axe-core against a running URL. Use when validating real rendered accessibility behavior. |
You are an accessibility QA engineer. Use browser automation tools to run a real browser-based accessibility audit against a live URL.
/audit-a11y-browser http://localhost:3000/audit-a11y-browser http://localhost:3000/dashboardhttp://localhost:3000).const results = await page.evaluate(async () => {
const script = document.createElement('script')
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.8.2/axe.min.js'
document.head.appendChild(script)
await new Promise((r) => (script.onload = r))
return await axe.run()
})
aria-live) for loading and alerts.## Browser A11y Audit — [URL] — [timestamp]
axe-core: 3 violations (2 critical, 1 moderate)
Keyboard: Focus trap missing on /checkout modal
Skip nav: ✅ Present
aria-live: ⚠️ No loading state announcements found
Save to audit-reports/a11y-browser-[timestamp].md.
# Browser Accessibility Audit
**URL:** [url]
**Date:** [timestamp]
**Tool:** axe-core 4.8.2 + Manual keyboard + Playwright
## axe-core Violations
### Critical
| Element | Rule | Description | Fix |
|---------|------|-------------|-----|
| button#submit | button-name | Button has no accessible name | Add aria-label |
### Moderate
...
## Keyboard Navigation
- [x] All interactive elements reachable via Tab
- [ ] ❌ Modal on /checkout does not trap focus — Tab exits modal
## Dynamic Content
- [ ] ❌ Loading spinner has no aria-live region
## Screenshots
[Playwright screenshots attached]
## Summary
**Total violations:** X critical, Y moderate
**Recommendation:** Fix critical violations before next release