skills.rest
selrai-company
selrai-companyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-accessibility

Audit and improve web interfaces for WCAG 2.1 accessibility compliance.

Updated Aug 27, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#aria#keyboard-navigation#accessibility-testing
One-click install
npx skills add https://github.com/selrai-company/claude-workshop-kit --skill web-accessibility-selrai-company
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/selrai-company/claude-workshop-kit/tree/main/skills/web-accessibility
Command: npx skills add https://github.com/selrai-company/claude-workshop-kit --skill web-accessibility-selrai-company

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures user interfaces are accessible to people with disabilities by applying WCAG 2.1 guidance, improving keyboard navigation, screen reader compatibility, and visual clarity, and reducing legal and usability risks for web products.

Core Features & Use Cases

  • Semantic HTML guidance for clearer structure and native accessibility.
  • Keyboard navigation and focus management patterns for Tab, Shift+Tab, arrow keys, and ESC handling.
  • ARIA usage patterns: aria-label, aria-labelledby, aria-describedby, aria-live, aria-hidden, and role assignments.
  • Visual accessibility: color contrast checks, visible focus indicators, and avoiding information conveyed by color alone.
  • Accessibility testing: integration with axe-core, Lighthouse, manual keyboard testing, and screen reader validation.
  • Common use cases: building accessible components, auditing existing sites, implementing forms, handling modals/dropdowns, and preparing WCAG compliance reports.

Quick Start

Make a React + TypeScript modal meet WCAG AA by adding a focus trap, ESC and background click to close, clear ARIA-labeled title and description, and run an axe-core scan.

Frequently Asked Questions about web-accessibility

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

FAQPage Schema
How do I make a React modal keyboard-navigable and screen-reader friendly?▼

Make a modal keyboard-navigable by implementing a focus trap, handling ESC and background click to close, and assigning clear ARIA-labeled titles and descriptions to meet WCAG AA standards.

What ARIA attributes do I need for accessible web forms?▼

Accessible web forms require ARIA attributes like aria-label, aria-labelledby, aria-describedby, and aria-live to provide screen reader compatibility and satisfy WCAG 2.1 semantic structure requirements.

How do I test web accessibility for WCAG compliance?▼

Test web accessibility for WCAG compliance by integrating automated tools like axe-core and Lighthouse, performing manual keyboard navigation testing, and validating screen reader compatibility.

When should I use semantic HTML over ARIA roles for accessibility?▼

Use semantic HTML over ARIA roles whenever possible to provide native keyboard navigation and structural clarity, applying ARIA attributes only when semantic HTML cannot convey the intended meaning.

Does this Skill support color contrast checks for visual accessibility?▼

Yes, visual accessibility is supported through color contrast checks against WCAG thresholds, ensuring visible focus indicators and avoiding information conveyed by color alone.

Can I audit existing sites for accessibility issues?▼

Yes, you can audit existing sites for accessibility issues by applying WCAG 2.1 guidance, checking keyboard navigation patterns, and running automated scans to identify compliance gaps.

Related Skills

Explore More Software Engineering Skills→
ksciuskscius
2

web-accessibility

Enforce WCAG 2.1 AA accessibility requirements for web UI components.

Community
Intermediate
pacphipacphi
6

accessibility-testing

Perform WCAG 2.2 accessibility testing on web applications with axe-core.

Community
Advanced
a53alia53ali

accessibility-testing

Test web and mobile applications for WCAG 2.1/2.2 AA conformance using automated tools and manual techniques.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced