Accessibility

Last updated: April 2026

The short version

TimerBox targets WCAG 2.2 AA. Every timer has keyboard shortcuts, screen reader labels, and respects your system preferences for motion and color. A few edges aren't polished yet. They're listed below.

What works today

  • Keyboard: Space plays and pauses. R resets. Escape closes modals. A visible focus ring appears for keyboard navigation and stays out of the way for mouse clicks.
  • Screen readers: Timer displays announce the current time and state (paused, running, complete). Control buttons have descriptive labels. Decorative graphics are hidden from assistive tech.
  • Reduced motion: If your system is set to reduce motion, animations are effectively disabled. Progress rings, phase transitions, and overlays all fall back to instant changes.
  • Theme: Dark by default with a light toggle. First-visit theme follows your system preference.
  • Zoom: No zoom blocks. Font sizes scale with your browser settings.
  • Stable digits: Timer readouts use tabular figures so numbers don't shift as seconds change.
  • Form inputs: Every input has a visible or screen-reader label. Error states use a live region so they're announced when they appear.
  • Structure: Each page has a single h1 and a clean heading hierarchy.

Known limits

  • Light-mode color contrast hasn't been formally verified against WCAG on every pairing. If you spot something hard to read, please tell us.
  • Timer completion is signaled by sound, a browser notification (when permitted), and an updated label. There isn't a separate assertive screen reader announcement beyond those three channels.
  • A couple of decorative elements (the breathing circle, the timer face in some views) respond to clicks but aren't in the Tab order. The keyboard-accessible control is always a real button nearby.
  • The header doesn't include a skip-to-content link. It's compact enough that the main content is a small number of Tab stops away.

Report a concern

If something doesn't work for you, reach out via the Contact page. The page you were on, what you were trying to do, and what blocked you all help us narrow it down.