Axe DevTools
by @dylanb
Accessibility testing and remediation using the axe MCP Server. Use when creating or modifying UI code (HTML, JSX, TSX, Vue, Svelte, CSS) to ensure accessibility compliance. Triggers on tasks involving web pages, components, forms, navigation, modals, tables, images, or any user-facing markup. Also use when explicitly asked to check accessibility or run an axe scan.
clawhub install axe-devtoolsπ About This Skill
name: axe-accessibility description: Accessibility testing and remediation using the axe MCP Server. Use when creating or modifying UI code (HTML, JSX, TSX, Vue, Svelte, CSS) to ensure accessibility compliance. Triggers on tasks involving web pages, components, forms, navigation, modals, tables, images, or any user-facing markup. Also use when explicitly asked to check accessibility or run an axe scan.
axe Accessibility Skill
Test web pages for accessibility violations and get AI-powered remediation guidance using the axe DevTools MCP Server.
Prerequisites
AXE_API_KEY environment variable setdequesystems/axe-mcp-server:latestTools
The wrapper script at scripts/axe-mcp.js (Node.js β no extra dependencies) provides two tools:
analyze
Scan a live web page for accessibility violations. Requires a URL (works with localhost).
node scripts/axe-mcp.js analyze
Returns JSON-RPC response. The violations are in result.content[0].text (JSON string) under the data array. Each violation has: rule, impact, description, selector, source, helpUrl.
remediate
Get AI-powered fix guidance for a specific violation. Handles HTML with quotes/brackets safely.
node scripts/axe-mcp.js remediate [pageUrl]
Returns general_description, remediation, and code_fix in result.content[0].text.
tools-list
List available MCP tools.
node scripts/axe-mcp.js tools-list
Workflow
When modifying UI code and a live page is available:
1. Analyze β node scripts/axe-mcp.js analyze
2. Parse β extract violations from the JSON response
3. Remediate β for each unique rule violation, call remediate with ruleId, element HTML, and issue description
4. Apply β implement the recommended code fixes in source
5. Verify β re-run analyze to confirm zero violations
When no live page is available (static code review), apply accessibility best practices directly:
alt text (or alt="" for decorative) elementsNotes
remediate call uses AI credits from your organization's allocationSupport
For technical support, bug reports, and feature requests:
Pricing & Sales
About Deque
Deque Systems is the trusted leader in digital accessibility.
βοΈ Configuration
AXE_API_KEY environment variable setdequesystems/axe-mcp-server:latestπ Tips & Best Practices
remediate call uses AI credits from your organization's allocation