Stats
Actions
Tags
From holocron
WCAG 2.2 AA quick reference — semantics, keyboard, names, states, contrast, motion, errors. Use when building or reviewing UI components.
How this skill is triggered — by the user, by Claude, or both
Slash command
/holocron:a11y-checklistThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this as a walk-through, top to bottom. If you can't answer "yes" or "N/A" for a line, fix it.
Use this as a walk-through, top to bottom. If you can't answer "yes" or "N/A" for a line, fix it.
<button> for actions. <a> for navigation. Lists use <ul>/<ol>. Landmarks use <main>/<nav>/<header>/<footer>/<aside>.<h1>, no skipped levels.<label>s (or aria-labelledby). Placeholder is not a label.Tab.:focus-visible without replacement.aria-label.alt; decorative alt="".aria-describedby.aria-expanded, aria-selected, aria-pressed, aria-checked, aria-invalid reflect the current state and update as it changes.aria-busy or a live region announcement.role="status" or role="alert" live region (use alert sparingly — it's interruptive).prefers-reduced-motion. No auto-animating carousels, parallax, or transitions without the opt-out.<main> landmark and a sensible lang on <html>.aria-required or required).role="button" on a <div> — use <button> insteadaria-hidden on interactive content — almost always wrongCommon SCs you'll cite: 1.1.1 (non-text alt), 1.3.1 (info and relationships), 1.4.3 (contrast), 2.1.1 (keyboard), 2.4.3 (focus order), 2.4.7 (focus visible), 3.3.1 (error identification), 4.1.2 (name, role, value), 4.1.3 (status messages).
npx claudepluginhub atuljha23/holocron --plugin holocronGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.