Skip to content
Horalis
Theme

Kept only in this tab.

HoralisAll the Horalis tools

Tools

Theme

Kept only in this tab.

Accessibility audit: WCAG 2.2 AA (phase C1)

All the research sheets

Translated from the Spanish original. Where they differ, the Spanish one holds.

Date: 14 October 2026. Scope: the hub and the three tools (Horalis Growth, Cost of Living, Inflation), built as they are published. WCAG 2.2 AA is the basis of the European standard EN 301 549.

Result: what can be checked with tools and with a browser complies, after fixing what was found (below). The test with real screen readers and with people is missing: without it, the audit is not complete (see "What is missing").

What was checked and how

25 pages (22 in Spanish and the front pages in English):

  • hub: front page, methodology, privacy, legal notice, terms, principles, about and roadmap;
  • Growth: on opening, with the result, Test my plan, How it works, Your data, About and Terms;
  • Cost of Living: its two views and Your data;
  • Inflation: the tool and Your data.

Each page, with all its disclosures open, in four modes: 360 px light, 360 px dark, 1366 px light and 1366 px dark. Chromium, with the reduced motion preference.

CriterionHowResult
All the level A and AA ones that can be automated (contrast 1.4.3, names 4.1.2, labels 1.3.1 and 3.3.2, language 3.1.1 and 3.1.2, titles 2.4.2…)axe-core 4.10.3, rules wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa0 failures on the 25 pages and the 4 modes
Keyboard (2.1.1, 2.1.2, 2.4.3)Tab through the whole page (499 stops in all) until returning to an element already visitedEverything is reached; no trap
Visible focus (2.4.7)At each stop: a visible outline or shadowAt all of them
Focus not obscured (2.4.11, new in 2.2)At each stop: nothing fixed on top of the elementAt all of them, after fix 1
Target size (2.5.8, new in 2.2)Each link, button, field and summary: at least 24 × 24 px (except a link inside a sentence)Yes. The radio buttons are 18–20 px, but their label, which also activates them, is 44 px. The hidden file field (1 × 1 px) is used from its visible button
Reflow (1.4.10)At 320 px wide: no sideways scrolling of the page0 px on all
Text spacing (1.4.12)Line height 1.5, letters 0.12 em, words 0.16 em, paragraphs 2 em, at 320 px0 px of sideways scrolling, after fix 3
StructureOne h1, main, header, footer, a "Skip to content" link, the page's langOn all

Besides, each tool's tests already check on every build:

  • AA contrast of each text in both modes;
  • targets of 44 × 44 px and fields of 16 px in Growth;
  • that nothing moves with reduced motion;
  • that the layout does not shift while loading (CLS 0);
  • that the chart's colours can be told apart with any type of colour vision.

Visual consistency. The four websites use the same colours, the same typeface (the system's) and the same spacing from seed-kit (tokens.css, base.css, chrome.css). The header and the footer are the same model, drawn the same in HTML and in React (a test compares them).

What was found and fixed

  1. Focus obscured in the methodology's data table (2.4.11). At 360 px, the table's first column stayed fixed when it was scrolled sideways and covered the licence links. Fixed: in that table the first column does not stay fixed.
  2. Standalone links smaller than 24 px (2.5.8): each tool's link in the methodology, its research sheet and the fingerprints for mirrors in "How to check a copy". They are now 44 px, and those of the table, 24 px.
  3. A heading that overflowed with more spaced text (1.4.12): "Terms of use" in Spanish, at 320 px. Fixed: headings break long words, with a hyphen, and so does long text (addresses, "Persoonsgegevens").
  4. The "Methodology" link inside the version line did not reach 44 px in Growth (its target test caught it). It moved to the footer's list of links, like the others.

What is missing (it needs people)

  • Real screen readers: NVDA with Firefox (Windows), VoiceOver with Safari (macOS and iOS) and TalkBack with Chrome (Android). Tasks:
    • Growth: choose the question, type the amounts, choose an example, hear the result, open Test my plan;
    • Cost of Living: choose a country and hear what is needed;
    • Inflation: change the country and hear the sentence;
    • the hub: download the .zip, send feedback.
  • Firefox and Safari: the audit only used Chromium.
  • People with disabilities using the tools with their own means. The hub's "For everyone" principle already says so as pending.
  • Dutch is built, but hidden: it was not audited separately. It uses the same pages and styles.
  • A public accessibility statement, which the "Truly European" principle promises. This report is its basis. It still has to be published on the hub with a channel for reporting barriers: the feedback one will do.

How to repeat it

hub/scripts/a11y-audit.mjs does all of the above with Playwright. axe-core is not a dependency of the repository: it is installed separately and its location is given.

npm install --prefix /tmp/axe axe-core@4.10.3
# Build the four sites first (npm run build in each one).
AXE=/tmp/axe/node_modules/axe-core/axe.min.js node --experimental-strip-types hub/scripts/a11y-audit.mjs report.json

A design change that touches focus, sizes or text should repeat it.