Accessibility
A calming tool that only works if you can see a moving circle is not a calming tool for everyone. Accessibility was a starting requirement here, not a retrofit.
Our target, and where we actually are
Breathe is built to meet WCAG 2.2 Level AA across the whole site, including the session player. Being precise about what that means in practice:
- Checked automatically: every foreground and background pair in all three themes is tested against the WCAG contrast formula, and the build fails if any pair drops below 4.5:1 for body text or 3:1 for large text and control borders. Horizontal overflow is checked at 320, 375, 390, 414, 768, 1024 and 1440 pixels.
- Checked by hand: keyboard-only navigation, the reduced-motion path, the high-contrast theme, and text scaling to 175%.
- Not yet done: testing with real screen readers on real hardware, and any form of independent audit. The markup is written for assistive technology and the live regions are in place, but nobody has yet sat down with VoiceOver or NVDA and worked through a full session. Until that happens we are not going to claim it.
Three channels, always in sync
Every phase of every breath is delivered in three ways at the same moment, and all three are driven by the same timeline so they cannot drift apart:
- Visual — a circle that expands and contracts, with the phase name and a countdown in numbers.
- Spoken — a voice saying “breathe in”, “hold”, “breathe out”, and then counting the seconds with you — “breathe in… two… three… four”. Uses your device’s speech engine; you choose the voice, the speaking speed, and whether the count runs up or down.
- Tonal — a tone that rises continuously for the whole in-breath and falls for the whole out-breath, with a steady quieter tone through holds. Because it lasts the entire phase rather than marking only the start, you can follow the shape of the breath by ear alone, with the words off.
Any of the three can be turned off. The session remains fully usable with only one of them.
Screen readers
Each phase change is announced through a polite live region as, for example, “Breathe in, 4 seconds”. Session progress is exposed as a progress bar with a readable value (“1:20 of 3:00”). The moving circle is hidden from assistive technology because it carries no information the announcements do not.
This means you can start a session, lock your phone, and follow it entirely through your screen reader or the spoken guidance.
Keyboard
- Space or K — start, pause, resume
- Esc — stop the session
- S — open or close settings
- Tab — move between controls, with a visible focus ring at all times
There are no keyboard traps and no timed interactions that can be failed — pausing is always available and nothing expires.
Low vision
- Text scaling to 175% inside the app, on top of browser zoom.
- A dedicated high-contrast theme (black background, white text, yellow accents) that exceeds AAA contrast.
- Body text meets at least 4.5:1 contrast and control borders at least 3:1, in the light, dark and high-contrast themes. This is verified by a script rather than by eye — the weakest pair in the light theme is 3.11:1 for control borders and 4.69:1 for the faintest text.
- Touch targets are at least 44×44 CSS pixels.
- The layout reflows to a single column with no horizontal scrolling at 320px wide.
Motion sensitivity
If your device has “reduce motion” switched on, we detect it on your first visit and automatically switch to the still pacer: the circle stops moving and a linear progress bar plus the countdown carry the timing instead. You can also set this by hand in Settings, which overrides the system preference in either direction.
Deaf and hard of hearing
Nothing on this site requires hearing. Every spoken cue also appears as on-screen text. Optional vibration cues give a distinct pattern for in-breath, out-breath and hold on devices that support the Vibration API — useful if you want to close your eyes without relying on audio.
Cognitive load
The Panic Anchor technique exists specifically for moments when instructions are hard to follow: no counting, no holding, no way to get it wrong. Across the site we avoid time limits, avoid auto-playing anything, and keep one clear action per screen.
Known limitations
- No screen reader testing on real hardware yet, and no independent audit. Both are on the list.
- Voice guidance uses your device’s built-in speech engine. Quality varies a lot between browsers and operating systems, and some Linux setups have no English voice installed at all. Tones and on-screen text always work regardless.
- Speech synthesis can be interrupted by other audio on iOS. Pausing and resuming restores it.
Tell us what’s broken
If something here does not work with your setup, please tell us — including your browser, assistive technology and version if you can. Email the contact page. Accessibility bugs are treated as priority bugs, and if something here does not match your experience we would rather know than keep the claim.