A comprehensive developer framework for building WCAG 2.1 AA compliant websites using semantic HTML, ARIA, and keyboard-first navigation.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install accessibility
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 accessibility 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 Web Accessibility (WCAG 2.1 AA)?
This skill serves as a technical blueprint for developers aiming to achieve high-standard web accessibility. It bridges the gap between raw code and inclusive design by providing strict protocols for WCAG 2.1 AA compliance. By integrating these practices into your workflow with Openclaw Skills, you ensure that web interfaces are perceivable, operable, and robust for users relying on assistive technologies like screen readers and keyboard-only navigation.
The skill provides framework-agnostic patterns for essential UI components, including modal dialogs, tab systems, and complex forms. It emphasizes the importance of a semantic-first approach, reducing reliance on over-engineered ARIA and focusing on native browser behaviors to create stable, accessible user experiences.
Web Accessibility (WCAG 2.1 AA) Use Cases
- Implementing WCAG 2.1 AA compliant semantic HTML structures for complex web layouts.
- Troubleshooting and fixing focus management issues in modal dialogs and dynamic overlays.
- Ensuring high-contrast UI design to meet 4.5:1 text contrast requirements.
- Creating accessible form validation patterns that announce errors to screen reader users.
- Auditing existing components for accessibility violations using automated and manual testing protocols.
How Web Accessibility (WCAG 2.1 AA) Works
- Select semantic HTML elements based on a functional decision tree to provide a native accessible foundation.
- Apply ARIA attributes selectively to fill semantic gaps where standard HTML elements are insufficient.
- Configure manual focus management and focus traps to ensure logical keyboard navigation throughout the application.
- Verify visual compliance by checking color contrast ratios and implementing visible focus indicators.
- Execute a multi-stage testing workflow involving automated scanners, keyboard-only walkthroughs, and screen reader verification.
Web Accessibility (WCAG 2.1 AA) Setup
To utilize this skill within your development environment, ensure you have access to the bundled reference documents and agents. You can initiate an automated audit of your local files using the following command structure:
# Trigger the accessibility auditor agent to scan a specific component
/a11y-auditor scan ./src/components/MyComponent.tsx
Ensure your development environment supports standard testing tools like axe DevTools or Lighthouse for integrated reporting.
Web Accessibility (WCAG 2.1 AA) Data Schema & Taxonomy
The skill organizes its accessibility intelligence into a structured hierarchy of references and automated logic:
| Data Type | Location | Purpose |
|---|---|---|
| Core Requirements | references/wcag-checklist.md |
Full checklist of WCAG 2.1 Level A & AA success criteria. |
| Pattern Library | references/aria-patterns.md |
Implementation guides for roles, states, and properties. |
| Focus Logic | references/focus-management.md |
Code patterns for focus traps and navigation order. |
| Auditing Tools | agents/a11y-auditor.md |
Automated logic for scanning code for common violations. |
| Styling Rules | references/color-contrast.md |
CSS guidelines for contrast and focus-visible indicators. |
Web Accessibility (WCAG 2.1 AA) Advanced Features
- Automated accessibility auditing through the integrated a11y-auditor agent to catch common errors instantly.
- Advanced focus trap implementation patterns for Single Page Applications (SPAs) and complex modal structures.
- Dynamic announcement management using ARIA live regions for real-time status updates.
- Multi-platform screen reader testing protocols for NVDA, VoiceOver, and ChromeVox.
- Intelligent element selection logic that prioritizes native HTML over redundant ARIA roles.
SKILL.md
Loading
Related Openclaw Skills
Job Auto-Apply Skill
Automate job searches and application submissions across multiple platforms like LinkedIn and Indeed using Clawdbot.
TokenWatch
TokenWatch is a comprehensive spending monitor that helps developers track and optimize AI token costs across multiple providers in real-time.
Prompt Performance Tester
A model-agnostic benchmarking tool that compares performance, cost, and quality across nine major AI providers simultaneously.
PersistentMind
A persistent, searchable memory layer that prevents AI agents from forgetting user preferences and project context between sessions.
Agent Development for Claude Code
A comprehensive framework for designing, configuring, and scaling custom sub-agents within the Claude Code ecosystem.
Vercel AI SDK Core
A production-grade toolkit for building backend AI applications with the latest Vercel AI SDK v6 stable features, including the new Output API and agent abstractions.
Featured*
