Accessibility

WCAG 2.2 level AA is the floor for every page in both languages, and a change that fails an accessibility check does not reach the site.

• 0 axe violations allowed on a page, of any impact
• 63 axe rules run on each scanned page, from 5 WCAG tag sets
• 320 CSS pixels wide, and no page may scroll sideways
• 100 desktop Lighthouse accessibility score required on 21 pages

axe-core judges what a machine can judge. Several criteria it cannot judge have scripted browser tests of their own, among them reflow, focus hidden under the sticky header and a pause control for moving content. The checks run on every merge request and every push, and the next section lists each one with the exact name its test has in the code.

• Every built page is scanned, the 404 page included.

  WhyThe test takes its list of pages from the built site itself: every HTML file the build writes, in English and in Turkish, including the 404 page that a visitor sees at any address that does not exist. A new page is checked without anyone adding it.

  TestEnforced by a test on every change.

• A change that fails a check does not reach the site.

  WhyDeployment of the site waits for the build gates, the browser tests and the desktop Lighthouse run. If one fails, the site is not deployed. In CI a browser test that fails is run once more, and it stops the deployment only if it fails again.

  BuildEnforced by the build pipeline on every change.

Each row is a check that runs on every change. When this page is built, every row is matched to the test that runs it, so a renamed, deleted or skipped test breaks the build of this page instead of leaving a stale claim behind.

Keyboard focus looks the same everywhere: a solid 2px outline in the accent colour. It is drawn when the browser decides focus should show, so a mouse click on a button or link leaves no ring behind. Components may change the offset. They never change the width or the colour.

Try it with the keyboard.

Press Tab to move through these controls. They use the site’s own button and link classes and a plain text field, under the one global focus rule. The buttons are samples and do nothing.

The ring on four surfaces

The ring is not text, so it needs 3:1 against the colour behind it. The accent meets that on each of the four surfaces below: the two page surfaces, the accent tint and the ink of the code panels.

Offsets in use

Offsets in use run from 3px to -2px. The default ring stands clear of the element, the pause control and fields sit closer, step buttons are hugged by their ring and code panels draw it inside.

Sticky header and scroll margin

The header stays at the top of the window and is 67px tall. Links, buttons, form fields, summaries and anything with a tabindex carry a scroll margin of 84px at the top and 16px at the bottom, so when focus scrolls one of them into view it stops below the header with 17px to spare. Section anchors carry margins of their own.

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
:where(a[href], button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 84px; scroll-margin-bottom: 16px; }

• Focus is a solid 2px accent outline. Only the offset changes.

  WhyOne sign for focus everywhere, so nobody has to learn a second one. When this page is built it reads every focus rule in the components, layouts, pages and global CSS, and stops the build if one draws a different width or colour, or sets the ring through outline longhands or box-shadow.

  BuildEnforced by the build pipeline on every change.

• Focus is never hidden entirely under the sticky header.

  WhyWCAG 2.4.11. Keyboard users move through the page with focus, and a header that covers the focused element hides where they are. The test walks 3 pages at desktop width, and a second test walks them again in a window 390 px wide.

  TestEnforced by a test on every change.

• An outline is removed only where the ring moves to the container.

  WhyOn a whole-card link the ring goes to the card through :focus-within, so it still outlines the whole target. The build of this page stops if a component removes an outline in a file with no :focus-within rule.

  BuildEnforced by the build pipeline on every change.

Text reaches 4.5:1 on both page surfaces, and meaning never rests on colour alone. Links are underlined, the pause control changes shape and the do and do not marks on these pages carry a word as well as a symbol.

The full palette and the computed text contrast of every token are on the Colour page. This section keeps what accessibility adds to it.

Contrast for what is not text

Focus rings, icons and the borders that mark out a control need 3:1 against the colour behind them (WCAG 1.4.11). The accent, ink-muted and ink-subtle tokens meet it, and form fields draw their border in ink-subtle. The two hair tokens do not: the site draws separators and frames with them, and also the borders of the pause control, the ghost button and the menu button.

Computed from the tokens in tokens.css with the WCAG 2.x formula when this page is built, and rounded down. Whether the pause control, the ghost button or the menu button needs its border to be recognised has not been audited; it is listed under the gaps below.

Links in running text

In running text a link is marked by its underline. The colour supports the underline; it never replaces it.

Shape and words carry state.

The pause control shows two bars while things move and a triangle once they stop, and its label switches between “Pause animations” and “Play animations”. The do and do not marks on these pages pair a tick or a cross with a word.

• Small text never falls below 4.5:1.

  WhyWCAG 1.4.3. axe measures the text on every scanned page, and a unit test pins the text tokens against both surfaces.

  TestEnforced by a test on every change.

• Plain accent is for non-text: rings, underlines, rules and dots.

  WhyOn paper it measures 4.38:1, under the 4.5:1 that small text needs. Filled buttons use accent-deep instead; paper text on it measures 6.65:1.

  ReviewKept by review, not by a test.

• A link in running text never stands out by colour alone.

  WhyWCAG 1.4.1. axe fails a link in running text whose colour differs from the text around it by less than 3:1 and that has no other mark, such as an underline.

  TestEnforced by a test on every change.

Motion is added on top of content that is already there. One control stops every loop, loops rest when nobody can see them and nothing moves for people who ask their system for less motion.

How motion is built, from the curve to the scroll scenes, is on the Motion page. This section keeps what accessibility asks of it.

The pause control

A round 28px icon button labelled “Pause animations” or “Play animations”: one click stops every loop on the page, and the choice is stored in the browser under the key zs-motion, so the next page opens paused as well.

Loops rest when nobody is watching.

A loop pauses when its visual leaves the screen or the tab is hidden, and it obeys the site-wide pause.

Reduced motion

When the system asks for reduced motion, the block below turns off smooth scrolling, cuts transitions to almost nothing and removes CSS animations, and visuals go straight to their final state.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

• No loop runs without a visible pause control on the page.

  WhyWCAG 2.2.2. A browser cannot tell whether a page moves, so every loop sets data-ambient when it starts, and the 2.2.2 check in the axe test then looks for a visible control. The shared lifecycle sets the mark for the loops it runs; the noise canvas, the hold motion of the two scroll scenes and the hero scroll cue set it themselves. The build of this page stops if a component loops without the mark.

  TestEnforced by a test on every change.

• One decision pauses every loop on every page.

  WhyStopping motion should not be a task to repeat on each page. The test pauses on the home page and finds the next page paused.

  TestEnforced by a test on every change.

• A loop stops when its visual leaves the screen.

  WhyMotion that nobody sees still costs battery and processing. The test scrolls the dam illustration on the Zero Door page away and checks that its cards stand still.

  TestEnforced by a test on every change.

• With reduced motion, visuals rest in their final state and the control is hidden.

  WhyWhat was asked for is less motion, not a button to press. The test checks the visuals of the Zero Door page.

  TestEnforced by a test on every change.

• A one-time animation shorter than five seconds needs no control.

  WhyWCAG 2.2.2 asks for a control only when motion lasts longer than five seconds. A block that rises into place as it scrolls into view moves once, for 0.8 seconds, and stops.

  ReviewKept by review, not by a test.

• Motion never animates opacity.

  WhyText that fades through half transparency fails contrast on the way, and the automated contrast checks once failed for that reason. Elements enter by transform, clip-path or stroke drawing instead.

  ReviewKept by review, not by a test.

The server sends every page in its final, readable state. Scripts add motion on top; only the second block of the home hero waits for a script, and a CSS rescue opens it if the script is late.

Each page starts with the class no-js on its root element. A script removes it and, unless reduced motion is requested, adds the class motion. Every state that hides something before it animates is written under that motion class, except the second block of the home hero, which a CSS rescue opens if the hero script is late; without the script no content is hidden.

If the script runs but the observer never sees an element, a safety net reveals every reveal element after 3 seconds.

Without JavaScript the scroll scenes stack their cards, the pause controls stay hidden, the glossary shows its full list and the contact form posts as a plain HTML form.

• Content is complete without JavaScript.

  WhyA script can fail to load, be blocked or break. What a page says must not depend on it. A browser test opens every built page except the 404 page with scripts off: every revealed element must stand in its final place, and every labelled visual in the main content must be drawn, not hidden or clipped away. A second test checks the evidence scene on the home page in detail.

  TestEnforced by a test on every change.

• The contact form works without JavaScript.

  WhyIt is a real HTML form with native validation, and it posts to the same address with or without a script.

  TestEnforced by a test on every change.

• Reduced motion never leaves an element half revealed.

  WhySomeone who asks for less motion still sees all of the content, whatever the scripts do. A browser test opens every built page except the 404 page with reduced motion requested: no revealed element is left out of place, every labelled visual in the main content is drawn, the motion class is not set and no loop starts. A second test checks on the home page that every revealed element is also fully opaque and not hidden.

  TestEnforced by a test on every change.

A visual that makes a point is an image with a sentence: role=img and a label from the dictionary, written in both languages. A visual that only decorates is hidden from assistive technology.

<figure class="fd" data-flow role="img" aria-label={d.label} tabindex="0">
  <svg viewBox="0 0 760 260" preserveAspectRatio="xMidYMid meet">

<span class="lbl"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5"></path></svg>{c.do}</span>

The label follows the scene.

The scroll scenes on the home page and the Zero Door page are one image whose meaning changes step by step, and the label changes with it. These are the four sentences of the home page scene in this language.

1. Scene 1: two curves cross. Thousands of raw changes on one server narrow to a single alert.
2. Scene 2: a calendar grid. An illustrative fourteen days of evidence hunting, with a two day target scenario over the first two.
3. Scene 3: signal pills merging into one verdict pill.
4. Scene 4: a row of memory regions with one gap, the region with no file behind it.

How labels are written

Many labels in use begin with “Illustration:” or “Scene N:” and then say what is drawn and what it shows. Icons, glyphs, canvases, separators and arrows that only decorate carry aria-hidden=true. Numbers that count up on screen do so inside such an image, so a screen reader hears its sentence and not the count.

• A role=img visual never ships without a label.

  WhyWCAG 1.1.1. axe fails an image role that has no name. The labels come from the dictionary, so the English and Turkish sentences sit side by side.

  TestEnforced by a test on every change.

• When a scene changes step, its label changes with it.

  WhyA screen reader user hears what a sighted reader sees at that step.

  TestEnforced by a test on every change.

• Counting numbers are not read out on their way up.

  WhyReading every value is noise. The counters in the Zero Door illustrations climb inside an image with a sentence, so a screen reader hears that sentence instead. The commitment figures in the Trust centre do not count at all: on its way up a counter showed values that were never promised.

  ReviewKept by review, not by a test.

• Decoration is aria-hidden.

  WhyA shape that carries no meaning only takes up time in a screen reader.

  ReviewKept by review, not by a test.

The reflow test opens every built page, the 404 page included, at 320 CSS px, and none scrolls sideways. Tables, code and diagrams that cannot shrink scroll inside their own box, and the box takes keyboard focus so it can be scrolled without a mouse.

WCAG 2.2 asks for targets of at least 24 by 24 CSS px, or enough space around a smaller one. The custom controls on the site meet that size or go beyond it.

Smaller targets that rely on an exception

Links in running text fall under the inline exception: the line of text sets their size. axe target-size does not measure them.

• Custom controls meet the target size of WCAG 2.5.8.

  WhyWCAG 2.5.8. axe runs its target-size rule on every scanned page, and the Zero Door test measures the first pause control as well.

  TestEnforced by a test on every change.

Automated checks do not cover everything. These are the gaps we know of, listed so that this page is never read as a larger claim than the tests behind it.

The short public statement is in the Trust centre, and this page is the working detail behind it: it lists the tests in full.

If something on the site does not work with your keyboard, your browser settings or your assistive technology, tell us through the contact form. Name the page and what you were trying to do, and we will reply.

Report a problemAccessibility statement in the Trust centre