🎯

accessibility-audit

🎯Skill

from serkan-ozal/browser-devtools-skills

What it does

Performs comprehensive web accessibility audits using ARIA snapshots, AX tree analysis, and WCAG validation checks.

📦

Part of

serkan-ozal/browser-devtools-skills(9 items)

accessibility-audit

Installation

Quick InstallInstall with npx

npx skills add serkan-ozal/browser-devtools-skills

npm installInstall npm package

npm install -g browser-devtools-mcp

📖 Extracted from docs: serkan-ozal/browser-devtools-skills

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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

```bash

browser-devtools-cli a11y take-aria-snapshot

browser-devtools-cli a11y take-aria-snapshot --selector ".main-content"

```

AX Tree Analysis

```bash

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

```bash

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

[ ] Images have alt text
[ ] Videos have captions
[ ] Color is not the only indicator
[ ] Text has sufficient contrast

Operable

[ ] All functionality via keyboard
[ ] No keyboard traps
[ ] Skip links present
[ ] Focus visible

Understandable

[ ] Language specified
[ ] Labels on form inputs
[ ] Error messages clear
[ ] Consistent navigation

Robust

[ ] Valid HTML
[ ] ARIA used correctly
[ ] Works with assistive tech

Audit Workflow

```bash

SESSION="--session-id a11y-audit"

# 1. Navigate to page

browser-devtools-cli $SESSION navigation go-to --url "https://example.com"

browser-devtools-cli $SESSION sync wait-for-network-idle

# 2. Get ARIA snapshot (quick overview)

browser-devtools-cli $SESSION a11y take-aria-snapshot

# 3. Get detailed AX tree

browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \

--roles button,link,textbox,checkbox,radio,combobox

# 4. Check for interactive elements with occlusion

browser-devtools-cli $SESSION --json a11y take-ax-tree-snapshot \

--roles button,link \

--check-occlusion

# 5. Test keyboard navigation

browser-devtools-cli $SESSION interaction press-key --key "Tab"

browser-devtools-cli $SESSION content take-screenshot --name "first-focus"

# 6. Cleanup

browser-devtools-cli session delete a11y-audit

```

Common Issues

Missing Alt Text

```bash

# Check images in AX tree

browser-devtools-cli --json a11y take-ax-tree-snapshot --roles image

```

Missing Form Labels

```bash

# Check form elements

browser-devtools-cli --json a11y take-ax-tree-snapshot --roles textbox,checkbox,radio,combobox

```

Empty Buttons/Links

```bash

# Check for buttons and links with no accessible name

browser-devtools-cli --json a11y take-ax-tree-snapshot --roles button,link

```

Hidden but Focusable Elements

```bash

# Check for visibility issues

browser-devtools-cli --json a11y take-ax-tree-snapshot --check-occlusion

```

Specific Audits

Heading Hierarchy

```bash

browser-devtools-cli --json a11y take-ax-tree-snapshot --roles heading

```

Form Accessibility

```bash

browser-devtools-cli --json a11y take-ax-tree-snapshot \

--roles textbox,checkbox,radio,combobox,button

```

Navigation Elements

```bash

browser-devtools-cli --json a11y take-ax-tree-snapshot \

--roles navigation,link,menu,menuitem

```

Interactive Elements

```bash

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

More from this repository8

🎯

debugging🎯Skill

Debugs web web applications by inspconsoleecting messages,, tracing function and calls exceptions without breakingpoints. Human

🎯

browser-testing🎯Skill

Automates browser testing by navigating, interacting with web pages, filling forms, capturing content, and verifying UI behaviors using Browser DevTools CLI.

🎯

browser-devtools-cli🎯Skill

Automates web browser interactions using Playwright for testing, debugging, and extracting content via a powerful CLI tool.

🎯

visual-testing🎯Skill

Validates and compares web page visual rendering across different browsers and configurations using automated screenshot comparison techniques.

🎯

observability🎯Skill

Enables comprehensive web application monitoring by tracking distributed traces, console logs, network requests, and performance metrics across frontend and backend services.

🎯

react-debugging🎯Skill

Inspects and maps React components to DOM elements, helping developers quickly diagnose rendering issues and component interactions.

🎯

performance-audit🎯Skill

Performs comprehensive web page performance analysis using Web Vitals, network metrics, and SEO performance indicators.

🎯

api-testing🎯Skill

Mocks and tests API integrations by simulating responses, intercepting requests, and monitoring network traffic.