Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From core
Implements WCAG web accessibility (POUR principles) for UI components, forms, navigation, and multimedia. Use when designing, reviewing, or refactoring web interfaces for compliance.
npx claudepluginhub vinnie357/claude-skills --plugin coreHow this skill is triggered — by the user, by Claude, or both
Slash command
/core:accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Apply W3C Web Accessibility Initiative (WAI) principles when working on web interfaces to ensure usability for people with disabilities.
Guides implementation of WCAG web accessibility (POUR principles) for UI components, forms, navigation, and multimedia. Use when designing, reviewing, or refactoring interfaces for compliance.
Implements WCAG 2.1/2.2 accessibility patterns for inclusive UIs: ARIA, keyboard navigation, color contrast, focus management, and testing strategies.
Implements web accessibility guidelines including WCAG POUR principles, semantic HTML, ARIA roles, keyboard navigation, color contrast, media captions, and testing with axe/Lighthouse.
Share bugs, ideas, or general feedback.
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: