accessibility-guide

Implement WCAG 2.1 Level AA accessible web components with semantic HTML and ARIA.

2|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/linguistic76/skuel --skill accessibility-guide
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-guide
Source: https://github.com/linguistic76/skuel/tree/main/app/.claude/skills/accessibility-guide
Command: npx skills add https://github.com/linguistic76/skuel --skill accessibility-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert guidance and practical patterns to ensure web applications are usable by everyone, regardless of disability, by adhering to WCAG standards.

Core Features & Use Cases

  • WCAG Compliance: Follows WCAG 2.1 Level AA standards for perceivable, operable, understandable, and robust design.
  • Component Accessibility: Offers patterns for accessible buttons, links, forms, modals, dropdowns, and tab panels.
  • Use Case: When developing a new modal dialog, use this Skill to ensure it correctly traps focus, is announced by screen readers, and can be closed with the Escape key.

Quick Start

Use the accessibility-guide skill to learn how to implement accessible form labels.

Frequently Asked Questions about accessibility-guide

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

FAQPage Schema
How do I make a modal dialog accessible to screen readers and keyboard navigation?

To make an accessible modal, you must implement focus trapping, ensure the dialog is announced by screen readers using ARIA attributes, and allow closing via the Escape key. This Skill provides specific implementation patterns for these keyboard navigation and live region requirements.

What are the WCAG 2.1 Level AA requirements for web accessibility?

WCAG 2.1 Level AA requirements mandate that web content be perceivable, operable, understandable, and robust. This guide covers meeting these standards through semantic HTML, proper color contrast ratios, and correct ARIA attribute implementation.

How do I build accessible dropdowns and tab panels?

Building accessible dropdowns and tab panels requires correct ARIA roles, keyboard navigation support, and focus management. This Skill offers component-level accessibility patterns to ensure these interactive elements are fully operable.

What is the best way to test web accessibility for screen reader compatibility?

The best way to test web accessibility combines automated tools with manual screen reader checks. This Skill outlines testing strategies to verify ARIA implementation, focus management, and semantic HTML compliance.

Do I need semantic HTML or ARIA attributes for accessible forms?

You need both semantic HTML and ARIA attributes for accessible forms, using native elements first and ARIA only when necessary. This Skill guides you through implementing accessible form labels and input patterns.

Why is my keyboard navigation not working with focus management in dynamic components?

Keyboard navigation fails in dynamic components when focus is not moved programmatically or live regions are not announced correctly. This Skill addresses common mistakes in focus management and provides compliant ARIA patterns.