accessibility-pass

name	accessibility-pass
description	Audit an HTML/UI Studio build for accessibility — contrast, semantic HTML, keyboard/focus, motion, forms — and fix what's found. Use only when the user explicitly requests an accessibility review or a polish-pass.

Accessibility Pass

Good accessibility is good design — it serves keyboard users, screen-reader users, colorblind users (8% of men), slow networks, bright sunlight, and old devices. WCAG AA is the floor, not the ceiling. Fix issues directly in the file; when the surface is a screenshot or mockup you can't edit, report the findings as critique instead.

Read the file and resolve actual values (follow tokens back to their hex) before judging — don't guess from memory.

Contrast and color

• Compute the ratio for every resolvable text/background pair: 4.5:1 for body text (under 18px), 3:1 for large text (18px+ bold or 24px+) and for UI components (buttons, icons, focus rings). Fix every failing pair.
• Flag state communicated by color alone — green/red with no icon or text, a link distinguished only by hue, a chart with no labels. Add a second signal.
• Flag hard combinations: red+green (the most common colorblindness), blue+yellow at similar lightness, light gray on white, colored text on a colored background of similar brightness.

Semantic structure

• One <h1>; no skipped heading levels; headings describe content, not visual size.
• The right element for the role: <button> not <div onclick>, <a href> for navigation, <label for> linked to every input (a placeholder is not a label — it disappears on type), <nav>/<main>/<section>/<aside> for landmarks.
• alt on every meaningful image (describe what it conveys, not what it is); alt="" on purely decorative ones so screen readers skip them.
• ARIA only where semantic HTML can't express the role — role="button" on a <div> should usually just be a <button>.

Keyboard and focus

• Everything clickable is reachable by Tab, in reading order; no tabindex above 0.
• Modals close on Escape and trap focus while open; dropdowns open with Enter/Space.
• Never outline: none without a replacement. The replacement is :focus-visible, at least 2px with 2px offset, 3:1 contrast against the adjacent background.
• Hit targets at least 44×44px on touch surfaces.

Motion, forms, and the rest

• Animations and transitions respect @media (prefers-reduced-motion: reduce).
• Nothing flashes more than 3 times per second (photosensitive-epilepsy risk); autoplaying motion has a pause control.
• Error messages are specific ("Email address is invalid", not "Invalid"), visually tied to their field, and wired via aria-describedby.
• Required fields marked by more than color; type="email"/type="tel" and autocomplete where they apply.

Fix and report

Fix everything directly — for a borderline case (4.4:1, "very close"), fix it anyway; accessibility is the one dimension where "almost" fails a real person. Skip only what you genuinely can't touch (a third-party embed) and note it. End with one line: issues fixed by category and anything left for the user.