agentsclimarketplace
Sign in

A11y checklist

Skill atuljha23/holocron/skills/a11y-checklist

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

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.

SKILL.md

3.3 KB, 880 tokens by cl100k_base, 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).

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 4 of the 12 instructions most accessibility skills give in 880 tokens

Counted across 360 of the 378 authors here whose files we hold, read 2026-09-06

  • Respect prefers-reduced-motionhere, and in 49 of 360, across 41 files
  • Add alt text to every imagein 47 of 360, across 40 files
  • Make every interactive element keyboard operablehere, and in 46 of 360, across 37 files
  • Keep focus indicators visiblehere, and in 42 of 360, across 37 files
  • Associate every form input with a labelin 42 of 360, across 35 files
  • Ensure 4.5:1 contrast for normal textin 38 of 360, across 32 files
  • Trap focus in modals and restore it on closein 37 of 360, across 25 files
  • Prefer native HTML elements over ARIAin 37 of 360, across 33 files
  • Add aria-label to icon-only buttonsin 24 of 360, across 13 files
  • Announce dynamic content updates with aria-livein 24 of 360, across 16 files
  • Use ARIA only when native HTML is insufficientin 23 of 360, across 15 files
  • Meet WCAG AA contrast ratioshere, and in 23 of 360

Said here and by no other author read

  • Match HTML elements to component intent
  • Label every form control
  • Reflect state changes in ARIA attributes
  • Describe inline errors with cause and fix
  • Run axe in CI and treat findings as bugs

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. 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.