Accessibility Audit

Audit this code for accessibility (WCAG 2.2 AA). Start with the failures that dominate real-world audits, and be honest about what a code review can't verify.

The code (components/templates/pages):
"""
[PASTE THE MARKUP/COMPONENTS, or point an agent at the views/components directories]
"""
What this UI does: [THE FLOWS: forms, navigation, modals, tables, what users accomplish here]
Framework: [REACT / VUE / RAILS TEMPLATES / etc.]

**Pass 1: the big six** (these account for ~96% of detected failures on the web; check every instance):
1. Color contrast: flag any hardcoded colors that look below 4.5:1 for normal text / 3:1 for large text and UI components. Mark [MEASURE: fg/bg pair] where values come from a theme I didn't paste.
2. Missing/empty alt text: every img and svg, decorative ones get empty alt (alt=""), meaningful ones get a description of function, not appearance; linked images describe the destination.
3. Form inputs without labels: every input labeled (label for / aria-label as last resort), placeholder is not a label.
4. Empty links and buttons: icon-only controls need accessible names.
5. Document language + page title where applicable.
6. Heading structure: one h1, no skipped levels, headings as structure not styling.

**Pass 2: the ARIA discipline check:** pages using ARIA average MORE errors than pages without it, no ARIA beats bad ARIA. Flag: role/aria-* on elements where native HTML does the job (div-with-onclick that should be button, div role="navigation" that should be nav), aria-labels that lie or drift from visible text, ARIA states (aria-expanded, aria-selected) declared but never updated in the code. Every custom widget (dropdown, modal, tabs) gets checked against its APG pattern: correct role AND states AND keyboard handlers; an ARIA role without its keyboard behavior is a broken promise to screen readers.

**Pass 3: keyboard paths, traced in the code:** everything clickable reachable and operable by keyboard (real button/a elements or explicit key handlers), visible focus styles not suppressed (outline: none without replacement is a finding), focus management on modals (trap + return on close), no positive tabindex, and the WCAG 2.2 additions: focus not obscured by sticky headers, touch targets ≥24px, no drag-only interactions without a click alternative.

For each finding: WCAG criterion | file/line | who it breaks and how (the user story: "keyboard user cannot close this modal") | the fix, in code.

**The honesty section (mandatory):** what this static audit could NOT verify, actual rendered contrast, real screen-reader behavior, focus order in the live DOM, alt-text QUALITY: with the manual test list for each (tab through every flow; NVDA/VoiceOver smoke test on the top 3 flows). Never call the result "compliant": automated and code review together cover roughly a third to a half of WCAG: the rest is manual.

Rules: prefer deleting ARIA and using native elements over adding ARIA. Severity-rank by user impact on MY stated flows, not by criterion number.