Primary sources · 4
- [1] Web Content Accessibility Guidelines (WCAG) 2.1 — W3C Recommendation; sets the four POUR principles (Perceivable, Operable, Understandable, Robust) and 50 success criteria at Levels A, AA, and AAA · World Wide Web Consortium · Recommendation 5 June 2018; current Errata version 2024 https://www.w3.org/TR/WCAG21/
- [2] European Accessibility Act (Directive (EU) 2019/882) — EU directive on accessibility requirements for products and services; private-sector products & services must comply from 28 June 2025 · EUR-Lex · Effective 28 June 2025 https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32019L0882
- [3] Section 508 of the Rehabilitation Act of 1973 — US federal accessibility standard; aligned with WCAG 2.0 Level AA via the Section 508 ICT Refresh · U.S. Access Board · Refreshed standards effective 18 January 2018 https://www.section508.gov/manage/laws-and-policies/
- [4] Accessible Rich Internet Applications (WAI-ARIA) 1.2 — W3C Recommendation for accessible web applications; defines role / state / property attributes used on the dynamic components on this site · World Wide Web Consortium · Recommendation 6 June 2023 https://www.w3.org/TR/wai-aria-1.2/
AirMilesCalc targets WCAG 2.1 Level AA conformance. Most of the site meets that bar today, with two component categories — the 3D globe visualisation and a handful of wide data tables — where we surface the same information through accessible alternative formats. This page describes what we aim for, what we have shipped, what is still pending, and how to report accessibility issues.
What we aim for
AirMilesCalc targets the W3C WCAG 2.1 Level AA conformance level across every page on the site. That covers the Perceivable, Operable, Understandable, Robust principles — semantic HTML, keyboard-operable controls, sufficient colour contrast, resizable text, and content that does not rely on a single sensory channel. We also track compliance with the European Accessibility Act, whose private-sector obligations entered into force on 28 June 2025.
| Principle | What it means | How the site addresses it |
|---|---|---|
| Perceivable | Information and UI components must be presentable in ways users can perceive | Semantic HTML, ≥ 4.5:1 colour contrast for body text, alt text on images, no information conveyed by colour alone |
| Operable | Interface components and navigation must be operable via keyboard and assistive tech | Native HTML form controls, <details> / <summary> toggles, skip-to-content link, focus-visible outlines preserved |
| Understandable | Information and operation must be understandable | Plain-English copy, every number explained in prose, FAQ blocks with schema.org, consistent navigation |
| Robust | Content must be robust enough to be interpreted by user agents including assistive technologies | Valid HTML, ARIA used sparingly and only where native semantics fall short, Next.js App Router server-rendered HTML for graceful no-JS degradation |
How the site is built for access
The site is implemented in semantic HTML throughout. Headings follow a
strict descending order (h1 once per page, h2 for sections, h3 for
sub-sections). Every interactive control is either a native HTML element
or a <details> toggle — there are no custom JavaScript widgets that
would require ARIA shims to be accessible. The mobile navigation in the
top header uses native <details> so it works without JavaScript, and
the hamburger summary is keyboard-operable by default.
- 1Skip to main content
A keyboard-focusable skip link appears at the top-left on first keyboard interaction, jumping past the navigation directly to the
<main>element. - 2Single h1 per page
Every route renders exactly one
<h1>containing the page's primary topic. Subsections use<h2>and below in strict descending order. - 3Form controls have visible labels
Calculator airport selectors use the
comboboxpattern with visible labels and announced result counts. Submit buttons are real<button>elements, not styled<div>s. - 4Focus visibility preserved
No global
outline: nonerule. Default browser focus rings are kept, and on our brand colour they are tightened to a 2px ring at 3:1 contrast against the surrounding background. - 5Colour contrast checked
Body text on white backgrounds runs at 9.4:1 (well above the 4.5:1 AA requirement). Footer text on the dark navy background runs at 7.2:1.
Known limitations
Two component categories on the site present accessibility friction. We have chosen to ship them with documented alternatives rather than remove them, because the alternative path delivers the same information through accessible formats.
| Component | Where it appears | Friction | Accessible alternative path |
|---|---|---|---|
| 3D globe (globe.gl, WebGL) | Homepage calculator results, /distance/[route] pages | Visualisation is not directly meaningful to screen-reader or low-vision users | The same route is described in text on the page (origin, destination, distance in miles / km / NM, bearing in degrees and cardinal direction). The globe is decorative; no information depends on it. |
| Wide DataTables on /privacy and /methodology subpages | Cookie inventory; DEFRA factor tables; WGS-84 parameter tables | On viewports below ~480px the tables require horizontal scrolling | Tables are wrapped in `overflow-x-auto` so they scroll inside their container rather than triggering page-level scroll. Caption + source text is always rendered alongside the table. |
| Leaflet airport maps | /airport/[iata] right column; /airports/[country] hero | Map markers are visual; tooltips are mouseover-driven | Below every map, the same airports are listed as text links with their IATA codes, coordinates, and route counts. The map is a secondary entry point. |
| OG image API | Linked from `og:image` meta tags; not rendered in-page | Pure visual content; not encountered by site users directly | Title and description meta tags carry the same information in text form for screen readers and crawlers. |
How to report accessibility issues
If you encounter a barrier on AirMilesCalc — missing alt text, a keyboard trap, a low-contrast element, a screen-reader announcement that does not match what is visible — email info@airmilescalc.com with “Accessibility” in the subject line. A useful report includes the page URL, the assistive technology and browser you were using, what you expected, and what you actually experienced.
- 1Capture the URL and AT/browser
Include the exact URL where the issue appeared, the assistive technology (e.g., NVDA 2024.1, VoiceOver on iOS 18), and the browser name and version.
- 2Describe expected vs actual
Write what you expected to hear or see, and what you actually encountered. A short transcript of screen-reader output is gold.
- 3Send to info@airmilescalc.com
Email the same address used for general correspondence. Routine accessibility reports get a reply within 48–72 hours; severe barriers are prioritised and patched the same week where feasible.
Standards we map against
We use the following standards as the conformance reference set. Where they overlap, the strictest applicable requirement governs.
| Standard | Scope | Status |
|---|---|---|
| WCAG 2.1 Level AA | Web content (primary conformance target) | Active — ongoing audit |
| EU EAA / Directive 2019/882 | Private-sector products and services; effective 28 June 2025 | Tracking — site falls under ‘e-commerce’ functional category |
| Section 508 (US federal ICT) | Aligned with WCAG 2.0 AA | Indirectly covered by WCAG 2.1 AA conformance |
| WAI-ARIA 1.2 | Where ARIA is needed for custom widgets | Used sparingly; native HTML preferred |