A comprehensive accessibility tool for scanning and automatically repairing a11y violations in React and TSX components.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install a11y-label-audit
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install a11y-label-audit using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Accessibility Label Audit & Auto-fix (a11y-label-audit)?
The Accessibility Label Audit & Auto-fix skill is a developer-centric utility designed to identify and resolve accessibility gaps within React and TSX codebases. It specifically targets common issues like missing ARIA labels for icon-only buttons, lack of keyboard interactivity for simulated buttons, and incorrect image alt text. As part of the broader collection of Openclaw Skills, it helps teams maintain inclusive design standards without manual overhead.
Beyond basic linting, this skill understands the nuances of cross-platform deployment. It accounts for support variations in different engines like Tauri (WKWebView/WebView2), WeChat's X5 core, and standard mobile WebViews. By integrating this into your workflow, you ensure that your application remains usable for screen reader users and those relying on keyboard navigation across all target environments.
Accessibility Label Audit & Auto-fix (a11y-label-audit) Use Cases
- Auditing existing React projects for WCAG and a11y compliance violations.
- Automatically injecting aria-labels into icon-based components to support screen readers.
- Converting div and span elements with click handlers into fully accessible keyboard-navigable buttons.
- Ensuring cross-platform accessibility compatibility for apps running in Tauri or WeChat using Openclaw Skills.
- Standardizing image alt-text metadata across large-scale frontend repositories.
How Accessibility Label Audit & Auto-fix (a11y-label-audit) Works
- Determine the scan scope by defining specific files, directories, or using glob patterns to target all .tsx files while excluding build artifacts.
- Execute a multi-rule scan that uses pattern matching to find violations in icon buttons, simulated div buttons, images, forms, dialogs, and live regions.
- Generate a structured audit report that groups findings by file, providing line numbers and specific remediation advice.
- Apply automated fixes using string replacement techniques that respect the project's existing indentation, quote styles, and i18n translation patterns.
- Run a final verification step using local linting tools to confirm that the automated repairs haven't introduced syntax errors or regressions.
Accessibility Label Audit & Auto-fix (a11y-label-audit) Setup
To begin using this tool within your development environment, ensure your agent has access to the project source. You can trigger a scan using the following commands:
# Scan the entire project for accessibility issues
# This utilizes the core engine of Openclaw Skills to map your components
a11y-label-audit scan .
# Target a specific directory and output a report
a11y-label-audit scan ./src/components --report
Accessibility Label Audit & Auto-fix (a11y-label-audit) Data Schema & Taxonomy
The audit results are organized into a clear taxonomy to help developers prioritize fixes. This data is part of the standard reporting structure in Openclaw Skills:
| Attribute | Description | Example |
|---|---|---|
| Line Number | The exact line where the violation was detected. | 42 |
| Rule ID | The category of the a11y violation (e.g., img-alt-a11y). |
div-button-a11y |
| Violation Detail | A technical description of why the element is inaccessible. | Missing role="button" and tabIndex |
| Suggested Fix | The specific code snippet required to resolve the issue. | role="button" tabIndex={0} |
Accessibility Label Audit & Auto-fix (a11y-label-audit) Advanced Features
- Intelligent i18n integration that automatically wraps new labels in translation functions like
t()when detected. - Cross-platform compatibility mode that adds fallbacks for
inertattributes andfocus-visiblepseudo-classes in restricted WebViews. - Contextual image analysis that infers meaningful alt text from filenames and surrounding parent component semantics.
- Seamless integration with enterprise UI libraries like TDesign and Tencent YB-Component via Openclaw Skills.
- Focus trap management detection specifically for WeChat and mobile WebView sandboxes.
SKILL.md
Loading
Related Openclaw Skills
OO Design Principle Evaluator
A specialized diagnostic tool that evaluates object-oriented architectures against foundational Gang of Four design principles to eliminate brittle inheritance and rigid coupling.
MiniMax Media Generation
A unified MiniMax API wrapper for generating high-fidelity audio, cinematic images, and professional video clips through a single CLI interface.
MiVisionForge-SVOR
An AI-powered CLI tool for stable video object segmentation and removal using SVOR technology.
Household Book OCR
A specialized OCR skill for Openclaw Skills that extracts structured data from household register documents and images.
Leaptic
A dedicated Openclaw skill that provides real-time access to Leaptic device snapshots, including hardware status and media metadata.
Multi-Pattern System Designer
An architectural framework for designing complex systems by coordinating multiple Gang of Four design patterns into a coherent, extensible structure.
Featured*
