skills.rest
kid-sid
kid-sidCOMMUNITY
Explore all skills by this author →
GitHub

accessibility

Audit UI components for keyboard navigation, ARIA correctness, and WCAG conformance.

186|15|Updated Apr 2, 2026
Search Tags:#accessibility#a11y#wcag#semantic-html#color-contrast#aria#keyboard-navigation
One-click install
npx skills add https://github.com/kid-sid/claude-spellbook --skill accessibility-kid-sid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/kid-sid/claude-spellbook/tree/main/skills/accessibility
Command: npx skills add https://github.com/kid-sid/claude-spellbook --skill accessibility-kid-sid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their UI components are accessible to keyboard users and screen readers by providing guidelines, checklists, and practical examples to reach WCAG AA compliance.

Core Features & Use Cases

  • Accessibility guidelines embedded in UI components, with focus management, ARIA patterns, color contrast, and semantic HTML best practices.
  • Use cases include auditing pages, reviewing components, and preparing for accessibility reviews or audits.

Quick Start

Ensure your UI components meet keyboard and screen reader accessibility by following the guidance in this Skill.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make my UI components accessible to keyboard navigation?▼

Make UI components keyboard-accessible by enforcing semantic HTML, managing focus states, and applying correct ARIA patterns so all interactive elements are operable without a mouse.

What is WCAG AA conformance and how do I check for it during development?▼

WCAG AA conformance ensures UI components meet specific accessibility standards for color contrast, ARIA labeling, and keyboard operability, which you can check using structured checklists during development and QA.

How do I audit web pages for ARIA correctness and color contrast?▼

Audit web pages for ARIA correctness and color contrast by applying WCAG-aligned checklists that validate ARIA labeling, verify semantic HTML structure, and measure contrast ratios during UI reviews.

Does this accessibility approach work with existing form controls and component libraries?▼

Yes, this accessibility approach works with existing form controls and component libraries by applying ARIA patterns, focus management, and semantic HTML best practices directly during component audits and UI reviews.

What are the common limitations when adding ARIA labels to semantic HTML?▼

A common limitation when adding ARIA labels to semantic HTML is overriding native semantics incorrectly, which requires following WCAG-aligned checklists to ensure ARIA correctness without breaking screen reader functionality.

Related Skills

Explore More Design & Creative Skills→
rafifosrafifos
6

fixing-accessibility

Audit HTML documents for accessibility issues and provide code-level fixes.

Community
Intermediate
MolcajeteAIMolcajeteAI
2

accessibility-testing

Automate axe-core accessibility audits in Playwright and Vitest for React applications.

Official
Intermediate
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

react-accessibility

Implement WCAG 2.2 Level AA accessible patterns in React applications.

Official
Intermediate