Labels.io
Agent skills

A11y audit

Run this across the site when the user asks "is my site accessible?" or "audit a11y". Fixes applied inline where safe; otherwise flagged for the user.

What to check (WCAG 2.1 AA, pragmatic subset)

Semantic HTML

  • Each page has exactly one <h1>.
  • Heading hierarchy: h1 → h2 → h3, no skipping.
  • Landmarks in place: <header>, <nav>, <main>, <footer>.

Keyboard

  • Every interactive element reachable with Tab.
  • Focus state visible (the kit has a default focus ring; confirm not overridden).
  • No keyboard traps.
  • Skip-to-content link at the top of <body> (add one if missing).

ARIA

  • Icon-only buttons have aria-label.
  • Toggle buttons (like the mobile menu) have aria-expanded.
  • Decorative icons have aria-hidden="true".
  • Images have meaningful alt; decorative ones use alt="".

Color + contrast

  • Body text contrast ≥ 4.5:1 against background.
  • Large text (18px+) contrast ≥ 3:1.
  • UI components (buttons, inputs, borders) contrast ≥ 3:1.
  • Do not rely on color alone for meaning.

Forms

  • Every input has an associated <label>.
  • Required fields marked both visually and with aria-required or required.
  • Error messages announced via aria-live regions.

Motion

  • Animations respect prefers-reduced-motion.
  • No auto-playing video with sound.

How to run

  1. Read every route file under app/routes/ and every component under app/components/.
  2. Grep for common a11y issues:
    • Icon-only <button> without aria-label.
    • <img> without alt.
    • Headings out of order.
  3. Fix the safe ones inline. Flag anything that requires a design decision (like low-contrast brand colors).
  4. Run Lighthouse a11y audit in Chrome devtools; target score 95+.
  5. Report the list of fixes and remaining items to the user.

Report format

Fixed inline:
- Added aria-label to mobile menu toggle in Header.tsx
- Added alt text to hero image on index.tsx

Needs your input:
- DESIGN.md accent color contrast against white is 3.1:1 (target 4.5:1 for body).
  Options: darken the accent, or use it only for non-text (icons, borders).

Never touch

Do not change DESIGN.md colors during an a11y pass. Flag contrast issues to the user; any change to the design system is a separate conversation.

Add analytics

Previous Page

Perf audit

Next Page

On this page

What to check (WCAG 2.1 AA, pragmatic subset)Semantic HTMLKeyboardARIAColor + contrastFormsMotionHow to runReport formatNever touch