| name | accessibility-audit |
| description | Audit web accessibility using ARIA snapshots, AX tree analysis, and WCAG validation. Use when the user asks about accessibility, a11y, WCAG compliance, screen reader compatibility, ARIA roles, or keyboard navigation. |
| allowed-tools | Bash(browser-devtools-cli:*) |
Accessibility Audit Skill
Audit web accessibility using ARIA snapshots, AX tree analysis, and WCAG validation.
When to Use
This skill activates when:
- User asks about accessibility or a11y
- User mentions WCAG compliance
- User wants to check screen reader compatibility
- User needs to audit ARIA roles and labels
- User asks about keyboard navigation
Capabilities
ARIA Snapshots
browser-devtools-cli a11y take-aria-snapshot
browser-devtools-cli a11y take-aria-snapshot --selector ".main-content"
AX Tree Analysis
browser-devtools-cli --json a11y take-ax-tree-snapshot
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link,textbox
browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion
browser-devtools-cli --json a11y take-ax-tree-snapshot --only-visible
Keyboard Navigation Testing
browser-devtools-cli interaction press-key --key "Tab"
browser-devtools-cli interaction press-key --key "Tab" --selector "body"
browser-devtools-cli interaction press-key --key "Enter"
browser-devtools-cli interaction press-key --key "Escape"
WCAG Checklist
Perceivable
Operable
Understandable
Robust
Audit Workflow
SESSION="--session-id a11y-audit"
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle
browser-devtools-cli $SESSION a11y take-aria-snapshot
browser-devtools-cli $SESSION a11y take-aria-snapshot --cursor-interactive
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
--roles button,link,textbox,checkbox,radio,combobox
browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \
--roles button,link \
--check-occlusion
browser-devtools-cli $SESSION interaction press-key --key "Tab"
browser-devtools-cli $SESSION content take-screenshot --name "first-focus"
browser-devtools-cli session delete a11y-audit
Common Issues
Missing Alt Text
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles image
Missing Form Labels
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles textbox,checkbox,radio,combobox
Empty Buttons/Links
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link
Hidden but Focusable Elements
browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion
Specific Audits
Heading Hierarchy
browser-devtools-cli --json a11y take-ax-tree-snapshot --roles heading
Form Accessibility
browser-devtools-cli --json a11y take-ax-tree-snapshot \
--roles textbox,checkbox,radio,combobox,button
Navigation Elements
browser-devtools-cli --json a11y take-ax-tree-snapshot \
--roles navigation,link,menu,menuitem
Interactive Elements
browser-devtools-cli --json a11y take-ax-tree-snapshot \
--roles button,link,tab,switch,slider
Best Practices
- Always use ARIA snapshot first for quick overview
- Use AX tree with occlusion check for layout issues
- Filter by roles to focus on interactive elements
- Check both visible and hidden elements
- Test with keyboard only before reporting
- Take screenshots to document focus states
- Test at different viewport sizes for responsive a11y