[ToothyDev]

What this does

Audits the whole site for accessibility, fixes what everyone benefits from, and adds an Accessibility panel in Settings for the rest. Decision 030 records the audit and the choices.

Audit, already fine: text contrast (every pair at least 4.5:1), bars are sliders/meters with values in words, cards move by keyboard and the move is announced, focus rings everywhere, colour is never the only signal, sizes are in rem and zoom isn't blocked.

Fixed for everyone

• Supplies blue is a bit lighter (#4b7fd1). The bar fill was 2.5:1 on its track; it's now 3.2:1, and WCAG asks for 3:1 for graphics.
• Bar drag handles are larger, with a 2px dark ring, so they stand out against both the fill and the track. They still show only over the card or on focus.
• Phones (checked at 360px with everything owned):
  • Tabs show three per row instead of a strip that scrolled with no hint.
  • On Settings property rows the Running/Owned buttons wrap under the name. Before, they left the name about 9px.
  • Overview names wrap instead of being cut to "METHAM…", and on Ready now the action sits above the name.
• Reduced motion now covers everything that moves:
  • CSS animations (the pop-up slide-in), not just transitions
  • Motion made in script: card glides, the scroll to a linked card, the boot screen

Settings → Accessibility

• Motion: As set on this device (default) / Reduced / Full.
• Scan lines over the screen: on by default.
• Saved as state version 15, with a migration and a test, so backups carry these settings.

Not done (decided): an all-caps toggle, a high-contrast mode, a text size setting.

Closes #55

How to check it

• Phone width (DevTools, about 360px): every tab shows in the tab bar; on Settings the names stay readable; Overview names aren't cut.
• Businesses: hover a card and the bar handles show clearly against green and blue.
• Settings → Accessibility: set Motion to Reduced. Dragging cards no longer glides, the boot screen is skipped on reload, and a link from the Overview jumps straight to the card. Untick Scan lines and the overlay goes away. Both settings survive a reload.

Checklist

• npm run verify passes
• Game data added or changed here has a source (see docs/decisions/004-game-data.md): none changed
• README / CLAUDE.md updated if usage or workflow changed (CLAUDE.md map row added)

🤖 Generated with Claude Code

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying lsos with    Cloudflare Pages

Latest commit:	68b8e5d
Status:	✅  Deploy successful!
Preview URL:	https://3998728f.lsos-2qs.pages.dev
Branch Preview URL:	https://claude-55-accessibility.lsos-2qs.pages.dev

View logs