accessibility-wcag
Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing
Profile →npx skills add rohitg00/awesome-claude-code-toolkit --skill accessibility-wcag --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Accessibility & WCAG ## Semantic HTML ```html <!-- Use semantic elements instead of generic divs --> <header> <nav aria-label="Main navigation"> <ul> <li><a href="/" aria-current="page">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/about">About</a></li> </ul> </nav> </header> <main> <article> <h1>Product Details</h1> <section aria-labelledby="specs-heading"> <h2 id="specs-heading">Specifications</h2> <dl> <dt>Weight</dt> <dd>1.2 kg</dd> <dt>Dimensions</dt> <dd>30 x 20 x 10 cm</dd> </dl> </section> </article> </main> <footer> <p>© 2024 Company Name</p> </footer> ``` Use `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>` instead of `<div>` for landmarks. Screen readers use these to navigate the page. ## ARIA Patterns ```tsx function Modal({ isOpen, onClose, title, children }) { if (!isOpen) return null; return ( <div role="dialog" aria-modal="true" aria-labelledby="modal-title" onKeyDown={(e) => e.key === "Escape" && onClose()} > <h2 id="modal-title">{title}</h2> <div>{children}</div> <button onClick={onClose} aria-label="Close dialog"> <XIcon aria-hidden="true" /> </button> </div> ); } function Tabs({ tabs, activeIndex, onChange }) { return ( <div>
- Semantic HTML
- ARIA Patterns
- Keyboard Navigation
- Form Accessibility
- Color and Contrast
- Anti-Patterns
- Checklist
What does the accessibility-wcag skill do?
Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing
How do I install it?
Run `npx skills add rohitg00/awesome-claude-code-toolkit --skill accessibility-wcag --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rohitg00/awesome-claude-code-toolkit, a repository with 2,438 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.