homepage and arena a11y: readable small text, a labeled close button, heading order, bigger phone tabs

[gerardrecinto]

I ran a script over the built homepage on desktop and phone sizes (WCAG contrast of every text node against its real background, tap target sizes, heading order, button names, image alt) and fixed what it found. No copy was changed.

Small gray text used Tailwind slate-500 at 4.0:1 on the dark panels, under the 4.5:1 that 11 to 12 px text needs. 18 text nodes on the homepage failed. Both Tailwind configs now map slate-500 to #808fa5 (5.4:1 or better on every panel color), which fixes every use at once. The two terminal placeholder lines were 1.9:1 and now use that color. The Pro checkout modal close button was an icon with no label, so a screen reader announced just button; it has aria-label=Close and type=button. The homepage had two h2 followed by h4 jumps and the arena had h1 to h3 and h2 to h4; heading tags changed with their classes untouched, so nothing moves on screen. On phones the two scenario tabs were 30 px tall and are now 44 px (desktop is unchanged).

After the change the same script reports 0 low contrast text nodes from slate, 0 unlabeled buttons, and 0 heading skips on the homepage, and the arena sequence is h1, h2, h3 throughout. The audit also flagged black text on the green gradient buttons; that was my script reading a gradient as no background, and the contrast there is fine.

The two accessible-name and heading-order checks are now part of site-smoke.spec.ts, so they run on all four pages in the required Site Check from here on. Full e2e passes on chromium, webkit and mobile-chrome.

Still open: two 12 px violet labels sit at 4.1 to 4.2:1, and a few inline text links on phones are 15 to 20 px tall. The headline and positioning copy I left alone, since changing those is your call.

Thanks, Gerard Recinto

[gerardrecinto]

/gemini review

[gerardrecinto]

/gemini review

[github-actions]

Gemini PR Review

Reviewed commit: 8867b6f7db801e08fbb0d634523e7023b808b4c7
Verdict: PASS

• Correctness/Accessibility Improvement: The diff introduces an accessibility improvement by adding aria-label="Close" to a button (demo/index.html, line 1647) and adding min-h-[44px] for minimum touch target size on buttons (demo/index.html, lines 664-665).
• Correctness/Accessibility Improvement: The diff improves heading semantics across multiple HTML and TSX files by adjusting heading levels (e.g., h3 to h2, h4 to h3, h3 to p). This enhances document structure and accessibility for screen readers.
• Correctness/Accessibility Improvement: The diff improves text contrast by changing the color of informational text from text-dark-600 (contrast ratio 2.92:1 on dark-950) to text-slate-500 (contrast ratio 7.87:1 on dark-950) in demo/index.html (lines 1118-1119), which meets WCAG AA standards for small text.
• Test Improvement: The diff adds a new test block in tests/site-smoke.spec.ts (lines 87-99) that explicitly checks for buttons without accessible names and for skips in heading levels (e.g., h2 followed by h4). This strengthens the test suite by adding automated accessibility checks for common semantic issues.