Public: anyone can read this; the crew can change it.

Every page can be used with a keyboard and a screen reader: every control is labelled, focus is always visible, and a test walks each page to prove it #109

open not picked up yet opened this
opened this

For: the app is shown in a sales meeting and used by agents on phones and laptops; a brokerage will ask whether it is accessible, and nothing checks it today.

Done looks like:

  • [ ] A test renders each page with sample data (signed-out front page, desk, lead page, due, report, profile, activity, import, sign-in sheet, price change) and asserts: exactly one <h1>; every input, select and textarea has a <label for> or aria-label; every button and link has visible text or an aria-label; every <img> has alt; the <html> element has lang; status notices are in a role="status" region.
  • [ ] Each failure the test finds is fixed in the page, not excused in the test.
  • [ ] A "Skip to content" link is the first focusable element on signed-in pages; :focus-visible styling is clear on buttons, links and fields in the stylesheet (design tokens, no new colours outside docs/DESIGN.md).
  • [ ] Text and button colours meet WCAG AA contrast (4.5:1 for body text), checked against the token values in a test.
  • [ ] bun scripts/design-lint.ts passes; README gains one line saying the pages are tested for keyboard and screen-reader use.

Files likely: src/pages/*.ts, the stylesheet under src/web/, a new src/a11y.test.ts. Risk: string-matching HTML in tests is brittle; keep the checks to simple, well-defined rules and parse tags with a small helper rather than one regex per page.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs