accessibility-wcag

Ensure web applications meet WCAG 2.1 AA standards with semantic HTML and ARIA.

3|1|Updated Feb 2, 2026
One-click install
npx skills add https://github.com/HouseGarofalo/claude-code-base --skill accessibility-wcag-housegarofalo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-wcag
Source: https://github.com/HouseGarofalo/claude-code-base/tree/main/.claude/skills/accessibility-wcag
Command: npx skills add https://github.com/HouseGarofalo/claude-code-base --skill accessibility-wcag-housegarofalo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers build web applications that are accessible to all users, including those with disabilities, by adhering to Web Content Accessibility Guidelines (WCAG) 2.1 AA standards.

Core Features & Use Cases

  • Semantic HTML Guidance: Promotes the use of correct HTML elements and heading hierarchy.
  • ARIA Pattern Implementation: Provides examples for live regions, accessible forms, buttons, and modals.
  • Keyboard Navigation: Details essential keyboard interactions and skip link implementation.
  • Screen Reader Utilities: Offers CSS for visually hidden elements accessible to screen readers.
  • Testing Checklists: Includes automated and manual testing steps for thorough a11y audits.
  • Common Pitfalls: Highlights frequent accessibility issues to avoid.

Quick Start

Use the accessibility-wcag skill to ensure all interactive elements on the webpage are keyboard accessible.

Frequently Asked Questions about accessibility-wcag

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

FAQPage Schema
How do I make my web app meet WCAG 2.1 AA accessibility standards?

To meet WCAG 2.1 AA accessibility standards, ensure your web app uses semantic HTML, correct heading hierarchy, proper ARIA attributes, and keyboard navigation to address issues like color contrast and focus management.

How do I implement ARIA patterns for accessible forms and modals?

Implement accessible ARIA patterns by utilizing provided examples for live regions, accessible forms, buttons, and modals to ensure dynamic content updates and interactive UI components are announced correctly to screen readers.

What is the best way to ensure keyboard navigation works for all interactive elements?

The best way to ensure keyboard navigation works is to detail essential keyboard interactions and implement skip links, guaranteeing all interactive elements on the webpage remain fully accessible without a mouse.

How do I test my website for screen reader compatibility?

Test screen reader compatibility by using visually hidden CSS utilities for screen readers and following included automated and manual testing checklists to perform thorough a11y audits and identify common accessibility pitfalls.

What are common web accessibility pitfalls I should avoid during development?

Common web accessibility pitfalls to avoid include skipping semantic HTML elements, neglecting proper focus management, failing color contrast ratios, and missing essential keyboard interactions for interactive components.

Do I need any external dependencies to audit my web application for inclusive design?

No external dependencies are required to audit inclusive design; the skill includes built-in testing checklists and reference materials to perform automated and manual accessibility audits directly within your workflow.