返回 Skill 列表
extension
分类: 安全与合规需要 API Key

Axe DevTools

使用 axe MCP 服务器进行无障碍测试与修复。用于创建或修改 UI 代码(HTML、JSX、TSX、Vue、Svelte、CSS)时确保无障碍合规。适用于涉及网页、组件、表单、导航、模态框、表格、图片或任何用户面向标记的任务。也用于明确要求检查无障碍或运行 axe 扫描时。

person作者: dylanbhubclawhub

axe Accessibility Skill

Test web pages for accessibility violations and get AI-powered remediation guidance using the axe DevTools MCP Server.

Prerequisites

  • Docker running locally
  • AXE_API_KEY environment variable set
  • Docker image pulled: dequesystems/axe-mcp-server:latest

Tools

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 <url>

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 <ruleId> <elementHtml> <issueRemediation> [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. Analyzenode scripts/axe-mcp.js analyze <url>
  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:

  • Images: alt text (or alt="" for decorative)
  • Forms: inputs need associated <label> elements
  • Interactive elements: keyboard accessible, visible focus
  • Color contrast: WCAG AA (4.5:1 normal text, 3:1 large text)
  • ARIA: valid, complete, not redundant with native semantics
  • Headings: proper hierarchy (h1 → h2 → h3)
  • Dynamic content: focus management for modals, SPAs, live regions

Notes

  • Each remediate call uses AI credits from your organization's allocation
  • The analyze tool spins up a real browser in Docker — allow ~30s for results
  • Works with localhost URLs for local development testing

Note: Requires a paid Axe DevTools for Web subscription.

Support

For technical support, bug reports, and feature requests:

Pricing & Sales

About Deque

Deque Systems is the trusted leader in digital accessibility.