Guide for implementing web accessibility following W3C WAI principles (WCAG) when designing, developing, or reviewing web interfaces
Applies W3C WCAG principles to web interfaces for disability inclusion. Activates during UI development, code reviews, and content creation to ensure perceivable, operable, understandable, and robust interfaces.
/plugin marketplace add vinnie357/claude-skills/plugin install core@vinnie357This skill inherits all available tools. When active, it can use any tool Claude has access to.
Apply W3C Web Accessibility Initiative (WAI) principles when working on web interfaces to ensure usability for people with disabilities.
Use this skill when:
Web accessibility is organized around four foundational principles:
Information must be presentable to users in ways they can perceive.
Key requirements:
Quick example:
<img src="chart.png" alt="Sales increased 40% in Q4 2024">
<button aria-label="Close dialog">
<span class="icon-close" aria-hidden="true"></span>
</button>
For detailed guidance on text alternatives, multimedia, and color contrast, see references/perceivable.md.
User interface components must be operable by all users.
Key requirements:
Quick example:
<button>Click me</button> <!-- Already keyboard accessible -->
<!-- Custom interactive element needs keyboard support -->
<div role="button" tabindex="0"
onclick="handleClick()"
onkeydown="handleKeyDown(event)">
Custom Button
</div>
For keyboard patterns, focus management, and navigation, see references/operable.md.
Information and UI operation must be understandable.
Key requirements:
Quick example:
<html lang="en">
<label for="email">Email address</label>
<input type="email" id="email"
aria-describedby="email-help"
required>
<div id="email-help">We'll never share your email</div>
For form patterns, error handling, and content clarity, see references/understandable.md.
Content must work reliably across user agents and assistive technologies.
Key requirements:
Quick example:
<!-- Use semantic HTML first -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
<!-- ARIA for custom components when needed -->
<div role="dialog" aria-labelledby="title" aria-modal="true">
<h2 id="title">Dialog Title</h2>
</div>
For ARIA patterns and custom components, see references/robust.md.
Consult references/forms.md for comprehensive form accessibility including:
See references/aria.md for:
Consult references/testing.md for:
See references/patterns.md for accessible implementations of:
Every page should have:
<html>For interactive components:
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.