什么是 Axe Accessibility？

Axe Accessibility 技能赋能开发人员将专业级无障碍审计直接集成到其 AI 驱动的开发环境中。通过利用 Deque Systems 的 axe MCP 服务，此 Openclaw Skills 资源允许智能体扫描实时网页、识别关键无障碍缺陷并生成精确的修复指导。它旨在支持包括 HTML、JSX、TSX、Vue 和 Svelte 在内的各种 UI 技术，使其成为现代前端开发的重要工具。此技能确保无障碍性不再是事后补救，而是自动化编码工作流的核心部分。

下载入口:https://github.com/openclaw/skills/tree/main/skills/dylanb/axe-devtools

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

Axe Accessibility 应用场景

• 在构建过程中扫描实时 Web 应用程序或本地开发服务器以进行 WCAG 合规性检查。
• 为复杂的无障碍问题（如 ARIA 使用、色彩对比度和键盘焦点）生成自动修复建议。
• 使用 Openclaw Skills 将无障碍审计集成到软件开发生命周期中，以维持高标准。
• 在部署到生产环境之前验证 UI 组件的无障碍性，以降低法律和可用性风险。

1. 该技能通过 Docker 容器触发 axe MCP 服务，对目标 URL 进行全面分析。
2. 系统生成包含特定违规项、影响级别和精确 CSS 选择器的详细 JSON-RPC 响应。
3. 技能内的 AI 修复引擎处理特定的违规数据，提供可操作且针对特定框架的代码修复。
4. 开发人员或 AI 智能体将建议的更改直接应用于源代码，以解决识别出的无障碍问题。
5. 使用 Openclaw Skills 工作流执行最终验证扫描，确保所有违规项已成功清除。

Axe Accessibility 配置指南

要开始使用此技能，请确保 Docker 在本地机器上运行，并且您拥有有效的 Axe DevTools for Web 订阅。配置您的 AXE_API_KEY 环境变量并拉取服务器镜像：

docker pull dequesystems/axe-mcp-server:latest

使用包含的 Node.js 封装脚本与服务工具进行交互：

# 分析特定 URL 或 localhost
node scripts/axe-mcp.js analyze 

# 为特定违规项获取 AI 驱动的修复建议
node scripts/axe-mcp.js remediate   

Axe Accessibility 数据架构与分类体系

该技能通过 axe MCP 接口返回结构化数据，重点关注详细的违规元数据。这使得 Openclaw Skills 能够精确地定位并修复无障碍漏洞。

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

• 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 

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:

• Images: alt text (or alt="" for decorative)
• Forms: inputs need associated 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:

• Email: helpdesk@deque.com
• Support Portal: support.deque.com
• Support Guide

Pricing & Sales

• Product Page: deque.com/axe/mcp-server
• Contact Sales: deque.com/contact

About Deque

Deque Systems is the trusted leader in digital accessibility.

• LinkedIn: Deque Systems