agentsclimarketplace

A11y checklist

Skill atuljha23/holocron/skills/a11y-checklist

Role-aware Claude Code plugin: 10 specialist agents (frontend, backend, QA, a11y, perf, security, architect, debugger, code-reviewer, docs), 15 domain commands, 8 skills, and a SQLite-backed learning crystal that compounds your corrections across sessions.

Install
npx -y skills add atuljha23/holocron --skill a11y-checklist

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

WCAG 2.2 AA quick reference — semantics, keyboard, names, states, contrast, motion, errors. Use when building or reviewing UI components.

SKILL.md

3.3 KB, as published. Nobody here has run it

Accessibility checklist (WCAG 2.2 AA)

Use this as a walk-through, top to bottom. If you can't answer "yes" or "N/A" for a line, fix it.

Semantics

  • The element matches the intent. <button> for actions. <a> for navigation. Lists use <ul>/<ol>. Landmarks use <main>/<nav>/<header>/<footer>/<aside>.
  • Headings form a valid outline — one <h1>, no skipped levels.
  • Forms have <label>s (or aria-labelledby). Placeholder is not a label.

Keyboard

  • Every interactive element is reachable by Tab.
  • Focus order matches visual order.
  • No focus traps. Modals trap focus only while open and restore on close.
  • Focus is visible (outline, ring, or theme equivalent). Don't remove :focus-visible without replacement.
  • Keyboard shortcuts don't collide with screen-reader virtual cursor.

Names & descriptions

  • Every interactive control has an accessible name. Icon-only buttons: aria-label.
  • Images: meaningful alt; decorative alt="".
  • Form errors are programmatically associated via aria-describedby.

States

  • aria-expanded, aria-selected, aria-pressed, aria-checked, aria-invalid reflect the current state and update as it changes.
  • Loading states have aria-busy or a live region announcement.
  • Async status changes are announced in a role="status" or role="alert" live region (use alert sparingly — it's interruptive).

Contrast

  • Normal text ≥ 4.5:1 vs background.
  • Large text (≥ 18pt or 14pt bold) ≥ 3:1.
  • UI components (form borders, focus rings, icon glyphs) ≥ 3:1.
  • Don't rely on color alone to convey meaning — error state must have an icon or text too.

Motion

  • Respect prefers-reduced-motion. No auto-animating carousels, parallax, or transitions without the opt-out.
  • Videos under 5s ok; longer needs pause/stop controls.
  • No flashing over 3 times per second in any region larger than ~25% of the viewport.

Structure & navigation

  • Page has a <main> landmark and a sensible lang on <html>.
  • Skip-to-content link at the top (or equivalent landmark structure).
  • Page title is descriptive and unique per route.

Errors & status

  • Inline errors say what was wrong and how to fix ("Email must include an @").
  • Errors appear near the input, are announced to AT, and don't rely solely on color.
  • Required fields are marked both visually and programmatically (aria-required or required).

Testing

  • Keyboard-only pass: unplug the mouse, try the flow.
  • Screen-reader pass (VoiceOver / NVDA) on critical flows.
  • axe or similar linter in CI — treat findings as bugs, not noise.

Smells

  • role="button" on a <div> — use <button> instead
  • aria-hidden on interactive content — almost always wrong
  • Tabindex > 0 — almost always wrong
  • "Click here" link text — unhelpful out of context

Success criteria quick map

Common 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).

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.