axe-accessibility

What This Skill Does

The axe-accessibility skill empowers developers to seamlessly integrate accessibility testing and automated remediation into their OpenClaw workflow. By leveraging the industry-standard axe DevTools via the axe-mcp-server, this skill allows users to scan live web environments—including local development servers—to detect WCAG violations. Beyond simple detection, it provides AI-powered code fixes, ensuring that web pages, components, forms, and navigation elements meet rigorous accessibility standards. It acts as an automated audit partner that bridges the gap between identifying a compliance issue and implementing a compliant code solution.

Installation

To install this skill, run the command: clawhub install openclaw/skills/skills/dylanb/axe-devtools. Ensure you have Docker installed on your machine and that you have pulled the dequesystems/axe-mcp-server:latest image. You must also set your AXE_API_KEY environment variable, as this skill requires an active paid Axe DevTools for Web subscription to function. Verify your setup by running node scripts/axe-mcp.js tools-list in your terminal to ensure the MCP server is communicating correctly with your local environment.

Use Cases

This skill is ideal for teams prioritizing inclusive design and WCAG compliance. Use it during the development of dynamic UI components (React, Vue, Svelte) to catch missing ARIA labels, invalid heading hierarchies, or insufficient color contrast before code is merged. It is equally effective for auditing existing production sites. When building interactive features like modals, custom dropdowns, or complex forms, the skill provides the guidance needed to ensure keyboard navigation and screen reader support are correctly implemented.

Example Prompts

1. "Analyze my local development site at http://localhost:3000 for accessibility violations and provide a remediation plan for any critical errors found."
2. "I am creating a complex form with custom styling. Can you run an axe scan and give me code fixes for any missing label or contrast issues?"
3. "Check the current page for accessibility compliance and suggest specific ARIA attributes to improve focus management for my new modal component."

Tips & Limitations

• Performance: The analyze tool initiates a headless browser within a Docker container, which may take up to 30 seconds to return results. Plan your workflow accordingly.
• Environment: This skill works best with accessible local URLs. For static code reviews, rely on the skill's best practices guidelines rather than automated scans.
• Security: Since the skill uses Docker and interacts with your local environment, ensure your network settings allow Docker to communicate with your dev server port.
• Accuracy: While the AI-powered remediation is highly advanced, always manually verify the code fixes in your specific design context to ensure they do not introduce layout regressions.