Agent-Skills.md

Agent Skills: a11y.ing-inspired accessibility checklist

>-

UncategorizedID: petrilahdelma/digitaltableteur/a11y-ing-checklist

Repository

petrilahdelma/digitaltableteur
PetriLahdelma
2

Install this agent skill to your local

pnpm dlx add-skill https://github.com/PetriLahdelma/digitaltableteur/tree/HEAD/.claude/skills/a11y-ing-checklist

Skill Files

Browse the full folder contents for a11y-ing-checklist.

Download Skill

Loading file tree…

.claude/skills/a11y-ing-checklist/SKILL.md

Skill Metadata

Name
a11y-ing-checklist
Description
>-

a11y.ing-inspired accessibility checklist

Philosophy (from a11y.ing)

  • Accessibility is shared work: design, development, and content must align.
  • Automated tools catch a fraction of real failures; plan manual keyboard and screen reader time.
  • "I would if I could" — if users cannot complete a task, the service failed, not the user.

When to invoke

  • New public route, pricing/PSEO/blog template change, or custom component with ARIA
  • Before removing WIP badge from Storybook components
  • After adding aria-label, list-style: none, or CSS content: on pseudo-elements
  • When expanding tests/a11y/page-verification/helpers/page-registry.ts

Automated pass

npm run test:a11y:pages
# Targeted:
npx playwright test tests/a11y/operable/label-in-name.spec.ts
npx playwright test tests/a11y/robust/list-semantics.spec.ts
npx playwright test tests/a11y/operable/reduced-motion.spec.ts
npx playwright test tests/a11y/perceivable/table-structure.spec.ts
npx playwright test tests/a11y/understandable/language-of-parts.spec.ts

| a11y.ing demo | WCAG | Repo test | |---|---|---| | Alt attribute | 1.1.1 | perceivable/image-alt-audit.spec.ts | | Tables | 1.3.1 | perceivable/table-structure.spec.ts | | Contrast | 1.4.3 | perceivable/color-contrast-audit.spec.ts | | Keyboard | 2.1.1 | operable/keyboard-navigation.spec.ts | | Focus visible | 2.4.7 | operable/focus-visibility.spec.ts | | Label in Name | 2.5.3 | operable/label-in-name.spec.ts | | Target size | 2.5.8 | operable/touch-targets.spec.ts (also 2.5.5) | | Language of parts | 3.1.2 | understandable/language-of-parts.spec.ts | | Name, role, value | 4.1.2 | page-verification/* (axe) | | List style removed | — | robust/list-semantics.spec.ts | | Pseudo-elements | — | Manual VO/NVDA on Pricing quotes, ProcessBlock | | Form instructions | 3.3.2 | understandable/form-labels.spec.ts |

Manual pass (required for ship)

  1. Keyboard — Tab header → main → footer; Esc closes mobile menu and modals.
  2. Screen reader (Safari + VoiceOver minimum) — Nav lists, pricing cards, blog content.
  3. Voice control — Say visible button/link label; control must activate (2.5.3).
  4. Zoom — 200% reflow (reflow-zoom.spec.ts); Safari text-only zoom on a blog post.
  5. Reduced motion — OS setting on; no essential information only in motion.
  6. Dark mode contrast — Spot-check if axe/Tailwind disagree (a11y.ing note).

Page registry

Add new public URLs to tests/a11y/page-verification/helpers/page-registry.ts before claiming Phase 7 coverage. Categories: core, work, blog, legal, utility, pseo.

Component red flags in this codebase

  • list-style: none on ul/ol without list-style-type: " " (Safari VO fix)
  • content: "…" in CSS pseudo-elements (Pricing quotes, ProcessBlock, Illustrations)
  • GSAP/CSS animations without prefers-reduced-motion path
  • aria-label that omits full visible text (voice control failure)
  • HTML tables without <th scope="col|row">

References