skills.rest
CenredJun
CenredJunCOMMUNITY
Explore all skills by this author →
GitHub

web-accessibility

Implement WCAG 2.1 AA-compliant accessibility in React, Vue, Svelte, or vanilla JavaScript UI components.

Updated Mar 27, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#screen-reader#aria
One-click install
npx skills add https://github.com/CenredJun/openclaw-claudecode-setup-kit --skill web-accessibility-cenredjun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/CenredJun/openclaw-claudecode-setup-kit/tree/main/skills/web-accessibility
Command: npx skills add https://github.com/CenredJun/openclaw-claudecode-setup-kit --skill web-accessibility-cenredjun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides developers to implement accessible UI components that conform to WCAG 2.1, ensuring inclusive web experiences for users with disabilities.

Core Features & Use Cases

  • Semantic HTML and ARIA attributes are applied to improve screen reader compatibility.
  • Keyboard-first interactions with proper focus management for modals, menus, forms, and navigation.
  • Accessibility testing guidance covering automated checks and manual validation.

Quick Start

Create a React button component with ARIA labeling and keyboard support following WCAG AA guidelines.

Frequently Asked Questions about web-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my React UI components WCAG compliant for screen readers?▼

Make React UI components WCAG compliant by applying semantic HTML and ARIA attributes to ensure screen reader compatibility. This skill guides you through adding proper labels and roles for accessible interactive widgets.

What is the best way to manage keyboard focus in an accessible modal?▼

Keyboard focus in an accessible modal is managed by implementing keyboard-first interactions with proper focus trapping. This ensures users can navigate and close modals without a mouse, meeting WCAG 2.1 AA standards.

Can I use this to add ARIA labels and semantic HTML to Vue or Svelte interfaces?▼

Yes, you can apply ARIA labels and semantic HTML to Vue or Svelte interfaces. The skill supports React, Vue, Svelte, and vanilla JavaScript to implement accessible forms, menus, and navigation.

How do I test web accessibility for WCAG 2.1 AA requirements?▼

Test web accessibility for WCAG 2.1 AA by running automated checks and performing manual validation. This skill provides guidance on testing keyboard navigation and screen reader compatibility.

Why does my interactive navigation menu fail keyboard accessibility tests?▼

Interactive navigation menus fail keyboard accessibility tests when they lack proper focus management and ARIA labeling. You must implement keyboard-first interactions to ensure menus are fully operable without a mouse.

Do I need automated testing tools to validate screen reader compatibility?▼

Automated testing tools are needed to validate initial screen reader compatibility, but manual validation is also required. This skill covers both automated checks and manual testing for WCAG 2.1 AA conformance.

Related Skills

Explore More Design & Creative Skills→
JaivishChauhanJaivishChauhan
6

accessibility

Apply WCAG-compliant semantics to portfolio pages for keyboard and screen reader accessibility.

Community
Intermediate
arbazkhan971arbazkhan971
26

a11y

Identify accessibility issues and generate WCAG 2.1 remediation guidance.

Community
Advanced
mbdeatonmbdeaton

epic-ui-guidelines

Guide UI/UX best practices, accessibility, and component usage in Epic Stack.

Community
Intermediate
Hack23Hack23
9

html-accessibility

Audit static HTML/CSS sites and implement WCAG 2.1 AA accessibility improvements.

Official
Intermediate