Accessibility Compliance

Accessibility Compliance

When activated, review the user's UI code for WCAG 2.2 AA compliance. Focus on the issues most commonly shipped to production.

The Review Checklist

1. Semantic HTML: Verify the page uses semantic landmarks (header, nav, main, footer, aside, section) instead of generic divs. Flag div-only structures, missing heading hierarchy, or headings that skip levels (h1 to h3 without h2).

1. Image alt text: Every img and picture element must have meaningful alt text, or empty alt="" for decorative images. Flag images with missing, auto-generated, or placeholder alt values like "image" or the file name.

1. Form labels: Every form input must have an associated label (via for/id, aria-label, or aria-labelledby). Flag inputs without labels, placeholder-only labels, and labels without visible text.

1. Color contrast: Body text requires 4.5:1 contrast against background, large text requires 3:1 (WCAG 2.2 AA). Flag any inline or token color combinations likely to fail.

1. Keyboard navigation: Every interactive element must be reachable by Tab and operable by Enter/Space. Flag div or span elements with click handlers and no tabIndex, role, or keyboard handler.

1. Focus indicators: Interactive elements must show a visible focus ring. Flag outline:none or focus styles removed without a replacement.

1. ARIA correctness: ARIA attributes must be valid and applied to the right element. Flag aria-hidden on focusable elements, incorrect roles, missing aria-expanded on toggles, and misuse of aria-label on decorative elements.

1. Target size (WCAG 2.2 new): Interactive targets must be at least 24x24 CSS pixels (minimum), 44x44 recommended for touch. Flag small buttons, icon-only controls, and tightly packed links.

1. Motion and animation: Respect prefers-reduced-motion for any animation longer than 5 seconds or essential to meaning. Flag auto-playing video or heavy parallax without a reduced-motion variant.

1. Screen reader hazards: Flag text injected as CSS content (invisible to most screen readers), icon-font-only labels, and dynamic content regions missing aria-live.

Output Format

Produce a markdown report with:

• Pass/Fail/Partial per check
• Specific file and line references for every flagged item
• Severity (Critical for WCAG A failures, High for AA failures, Medium for best-practice AA, Low for AAA improvements)
• WCAG 2.2 success criterion reference for each finding (for example, "SC 1.4.3 Contrast (Minimum)")
• One-line recommended fix per finding

When to Invoke

Invoke when the user says: "accessibility audit", "a11y review", "WCAG check", "is this accessible", "screen reader compatibility", "is my site ADA compliant", or similar.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: on-deck-society
• Source: on-deck-society/love-stack
• License: MIT

Install and usage instructions live in the source repository linked above.