Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From react-rtk
WCAG accessibility patterns — semantic HTML, ARIA, focus management, keyboard navigation. Use when working with aria attributes, role attributes, dialog/nav elements, form elements, or focus management code.
npx claudepluginhub surfertas/claude-react-rtk --plugin react-rtkHow this skill is triggered — by the user, by Claude, or both
Slash command
/react-rtk:accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
```
Web accessibility discipline: semantic HTML first, ARIA only when needed, keyboard access always. Invoke whenever task involves any interaction with accessible web content -- writing, reviewing, refactoring, or debugging HTML/CSS/JS for WCAG compliance, ARIA usage, keyboard navigation, focus management, screen reader support, or accessible component patterns.
Implements WCAG 2.1/2.2 compliance, ARIA patterns, keyboard navigation, focus management, and accessibility testing for web components.
Guides implementation of WCAG web accessibility (POUR principles) for UI components, forms, navigation, and multimedia. Use when designing, reviewing, or refactoring interfaces for compliance.
Share bugs, ideas, or general feedback.
clickable action → <button> NOT <div onClick>
navigation link → <a href> NOT <span onClick>
navigation section → <nav> NOT <div class="nav">
main content → <main> NOT <div class="content">
modal/dialog → <dialog> NOT <div class="modal">
list of items → <ul>/<ol>/<li> NOT <div> repeated
section heading → <h1>-<h6> NOT <div class="title">
form field → <input> + <label> NOT unlabeled input
// Modal: trap focus, restore on close
const previousFocus = useRef<HTMLElement>(null);
const openModal = () => {
previousFocus.current = document.activeElement as HTMLElement;
// focus first focusable in modal
};
const closeModal = () => {
previousFocus.current?.focus();
};
// Route change: focus main heading
useEffect(() => {
document.querySelector('h1')?.focus();
}, [pathname]);
role="tablist", role="tab", aria-selected, aria-controlsaria-expanded, aria-controls, button triggeraria-haspopup, aria-expanded, aria-activedescendantrole="status", aria-live="polite"role="alert", aria-live="assertive"aria-busy="true", role="status" with textFor detailed patterns, see references/ directory.