Fareband aims to meet WCAG 2.2 Level AA. This page states what that means here in concrete terms, what is checked automatically on every build, what is not done yet, and how to tell us when something is in your way.
| Commitment | How it is enforced |
|---|---|
| Keyboard access to everything | No control is mouse-only. The menu, the FAQ and the subscribe form all work from the keyboard alone, and the drawer traps and restores focus. |
| Visible focus, never removed | A two-pixel focus ring in Signal Teal with an offset, defined once in the global stylesheet and never overridden per component. |
| Colour is never the only signal | The amber used for a fare below the tenth percentile always sits next to a written figure and a text label. A build test fails if amber is used decoratively. |
| One h1, no skipped heading levels | Checked on every page of the built site by scripts/check-meta.mjs, which fails the build rather than warning. |
| Charts are not the only copy of the data | Every price band has a real HTML table underneath it with the same figures, selectable and readable by a screen reader. Nothing important lives only inside an SVG. |
| Data graphics carry a prose label | Each band exposes a complete sentence as its accessible name, because a screen reader cannot narrate a shape. |
| Reduced motion is respected properly | Under prefers-reduced-motion every animation and transition is cut to one millisecond and runs once, so content lands in its final state at once instead of fading. Nothing on the site is revealed by animation alone. |
| Tables are navigable | Every data table has a caption and scoped headers, and wide tables scroll inside their own container so the page itself never scrolls sideways. |
| Text scales to 200% | Type is set in relative units against a fluid scale, and layouts reflow rather than clipping. |
| Touch targets are at least 44 by 44 pixels | Applied to the menu control, form fields and every call to action. |
| Errors say what happened and what to do | Form errors are announced in a live region and tied to the field with aria-describedby, never signalled by a red border alone. |
| The site works without JavaScript | Prices, bands, tables, FAQs and navigation all render server-side. Script adds convenience, never content. |
Correction, 30 August 2026. An earlier version of this page stated contrast figures that had not been measured, and two of them were wrong. At the same time a structural grey was being used for small print at 2.26:1, which is well below any threshold and was genuinely hard to read. Both are fixed, the figures below are computed, and the build now fails if any of them regresses.
| Pair | Ratio | Needs |
|---|---|---|
| Body text on the page | 14.88:1 | 4.5 |
| Body text on a card | 13.69:1 | 4.5 |
| Secondary text on the page | 5.11:1 | 4.5 |
| Secondary text on a card | 4.70:1 | 4.5 |
| Links as text | 4.94:1 | 4.5 |
| Links on a card | 4.55:1 | 4.5 |
| Reversed text on a dark button | 14.88:1 | 4.5 |
| Success, warning and error labels | 4.55–6.00:1 | 4.5 |
| Focus ring and borders (not text) | 3.78:1 | 3.0 |
Signal Teal in its pure form measures 3.78:1 on the page background. That is enough for a focus ring, a border or large text, and not enough for a link in running text, so links use a darkened variant of it. The distinction is enforced by the build rather than left to whoever writes the next component.
Beacon Amber measures 1.98:1 and never carries text. It marks a fare at or below the tenth percentile, and that fare is always written out beside it in the main text colour.
If something on this site stops you doing what you came to do, write to hello@fareband.com and say which page and what happened. We answer within five working days and will tell you either when it is fixed or why it is not straightforward.
If you need a figure from this site in another format, ask and we will send it. The data is ours, so there is nothing stopping us.