ClawKit Logo
ClawKitReliability Toolkit
Back to Registry
Official Verified developer tools Safety 5/5

accessibility

Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".

Why use this skill?

Build accessible websites with the OpenClaw Accessibility skill. Master semantic HTML, WCAG 2.1 AA compliance, focus management, and ARIA patterns for inclusive web development.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/veeramanikandanr48/accessibility
Or

What This Skill Does

The Accessibility skill is a comprehensive toolkit designed to ensure your web projects meet WCAG 2.1 Level AA standards. It focuses on the core pillars of web accessibility: Semantic HTML, robust focus management, proper ARIA labeling, and inclusive design practices. This skill acts as an intelligent auditor, helping you identify and resolve issues related to keyboard navigation, screen reader compatibility, and visual contrast. By embedding this skill into your workflow, you ensure that your interactive components are usable by everyone, regardless of their physical abilities or assistive technology requirements.

Installation

To integrate this skill into your OpenClaw agent, execute the following command in your terminal: clawhub install openclaw/skills/skills/veeramanikandanr48/accessibility Ensure you have the latest version of the OpenClaw CLI to take full advantage of the internal semantic checking logic.

Use Cases

This skill is essential when:

  1. Refactoring non-semantic components (like 'div buttons') into accessible, keyboard-focusable elements.
  2. Troubleshooting failed automated accessibility tests, such as missing aria-labels or low contrast ratios.
  3. Creating custom components like modal dialogs, date pickers, or navigation menus that require complex focus management (trapping focus and handling escape key events).
  4. Ensuring complex dynamic content provides feedback to screen reader users via ARIA live regions.

Example Prompts

  1. "I have a custom dropdown menu that isn't accessible via keyboard. Can you help me implement keyboard navigation, focus management, and proper ARIA roles for this component?"
  2. "My audit tool is flagging low color contrast on my buttons. Can you check my CSS and suggest a palette that satisfies the 4.5:1 ratio requirement?"
  3. "The screen reader isn't announcing updates in my shopping cart widget. How can I implement a live region to notify users when items are added or removed?"

Tips & Limitations

  • Rule of Thumb: Always prioritize native HTML elements (buttons, inputs, etc.) over ARIA roles. ARIA should only be used when native elements cannot fulfill the functional requirement.
  • Focus Management: Always provide a visual focus indicator. Never use outline: none unless you are providing an equivalent, high-contrast custom replacement.
  • Testing: While this skill provides excellent guidance, always verify with real assistive tools like NVDA, VoiceOver, or axe-core automated testing suites.
  • Limitations: This skill does not automatically modify your codebase; it provides expert-level guidance, code snippets, and structural advice. You are responsible for applying these changes to your project.
Read Full Documentation on GitHub

Metadata

Author@veeramanikandanr48
Stars946
Views2
Updated2026-02-13
View Author Profile
AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill
Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-veeramanikandanr48-accessibility": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Tags(AI)

#accessibility#wcag#frontend#semantic-html#web-standards
Safety Score: 5/5

Related Skills

better-auth

Self-hosted auth for TypeScript/Cloudflare Workers with social auth, 2FA, passkeys, organizations, RBAC, and 15+ plugins. Requires Drizzle ORM or Kysely for D1 (no direct adapter). Self-hosted alternative to Clerk/Auth.js. Use when: self-hosting auth on D1, building OAuth provider, multi-tenant SaaS, or troubleshooting D1 adapter errors, session caching, rate limits, Expo crashes, additionalFields bugs.

veeramanikandanr48 946

security-reviewer

Use when conducting security audits, reviewing code for vulnerabilities, or analyzing infrastructure security. Invoke for SAST scans, penetration testing, DevSecOps practices, cloud security reviews.

veeramanikandanr48 946

api-designer

Use when designing REST or GraphQL APIs, creating OpenAPI specifications, or planning API architecture. Invoke for resource modeling, versioning strategies, pagination patterns, error handling standards.

veeramanikandanr48 946

cli-developer

Use when building CLI tools, implementing argument parsing, or adding interactive prompts. Invoke for CLI design, argument parsing, interactive prompts, progress indicators, shell completions.

veeramanikandanr48 946

swift-expert

Use when building iOS/macOS applications with Swift 5.9+, SwiftUI, or async/await concurrency. Invoke for protocol-oriented programming, SwiftUI state management, actors, server-side Swift.

veeramanikandanr48 946