claudetools/projects/acg-website-showcase/design/review-gemini.md

index.html

[ERROR] Accessibility: FAQ accordion buttons lack aria-controls and panels lack ids (line 217). Verified by checking markup. Confidence: 100%. [WARN] Accessibility: Calculator aria-live="polite" (line 197) contains the entire output ledger. Refutation attempt: Maybe app.js debounces input? No, app.js:125 fires recalc() and rewrites DOM immediately on every input event, causing severe screen reader spam while typing. Confidence: 100%. [OK] Form labels (line 261): Explicitly linked via for/id. [OK] Focus visibility: Custom outlines exist for inputs, and default browser outlines remain intact for buttons since no global reset exists. Confidence: 100%.

styles.css

[ERROR] WCAG Contrast (Light): --ink-3 (#837868) on --paper (#F7F3EB) yields ~3.8:1, failing AA 4.5:1. Refutation attempt: Is it only used for large text? No, it's used for small body text like .hero__note and .calc__foot. Corrected hex: #6D6456. Confidence: 100%. [ERROR] Accessibility: Collapsed FAQ answers .faq__a (line 327) hide visually via max-height: 0 but lack visibility: hidden. Screen readers will inappropriately read collapsed answers. Confidence: 100%. [ERROR] Responsive: Mobile nav links are display: none < 880px (line 127). Refutation attempt: Because it is a single-page site, users can still scroll. However, removing primary wayfinding without a hamburger fallback completely breaks standard user expectation. Confidence: High. [WARN] Responsive: Pricing tables lack a horizontal overflow wrapper. A 5-column table will break 320px mobile viewports. Confidence: 100%. [OK] WCAG Contrast (Dark): --ink-3 (#9A8C77) on #1C1814 is 5.3:1. Both light/dark --accent-ink and button texts pass AA comfortably. Confidence: 100%.

app.js

[WARN] Calculator Edge Case: Typing an empty string "" evaluates safely to 0 mathematically (line 64). Refutation attempt: Does this break the math? No. Does it break UI state? Yes, input.value is not overwritten in the UI during typing, leaving the input visually blank while the calculator computes 0. Confidence: 100%. [OK] Calculator Math: Divide-by-zero is handled safely via endpoints > 0 condition (line 112). NaN correctly defaults to 0. Confidence: 100%. [OK] Theme Toggle: Properly sets aria-pressed and respects system preferences dynamically (line 16). Confidence: 100%.

Design & Art Direction

[OK] AI-slop: None detected. The "Sonoran Ledger" constraints (strict 24px baseline, tabular-nums, sparse orange accent) are mathematically and visually respected. Copy is direct and avoids generic SaaS bloat words.

PRIORITIZED FIX LIST

1. [CRITICAL] Update --ink-3 in styles.css:12 to #6D6456 to meet WCAG AA contrast.
2. [CRITICAL] Add visibility: hidden to .faq__a (styles.css:327) and visibility: visible to its expanded state to prevent screen reader leakage.
3. [HIGH] Implement a mobile menu fallback for viewports < 880px rather than purely hiding .nav__link (styles.css:127).
4. [HIGH] Wrap .plan-table in an overflow-x: auto container to prevent layout breakage on narrow screens (index.html:120).
5. [MED] Add ids to FAQ panels and aria-controls to FAQ buttons (index.html:217).
6. [MED] Scope aria-live to specific total spans or debounce the input listener to prevent screen reader spam (index.html:197, app.js:125).
7. [LOW] Add a blur listener to calculator inputs to visually sync empty/invalid inputs back to "0" (app.js:61).