01
Keyboard and Focus
Every page opens with a skip link to the main content. Interactive elements take a visible
focus ring in ink at roughly 16:1 against the background, offset clear of the control. The
project dialogs are real <dialog> elements, so focus is trapped while
they are open and returns to whatever opened them on close.
02
Structure and Landmarks
One h1 per page and no skipped heading levels anywhere on the site. Header, main,
navigation and footer landmarks throughout, with the primary navigation labelled. The
translated support pages carry their own lang so screen readers pronounce them
in the right language rather than reading German with an English voice.
03
Contrast and Text
Body text sits at 6:1 or better and headings at 16:1. The studio's orange is only 2.5:1
against our background, so text that uses it now takes a darker tone of the same hue at
4.5:1, and the bright orange is kept for rules and badges where nothing depends on reading
it. Text scales with browser and OS text size settings.
04
Motion and Media
Promo films are muted, carry pause and sound controls we built rather than relying on the
embedded player, have captions covering every sound in them, and each has a written
description beside it for anyone who cannot see the screen or would rather read. Nothing
autoplays for visitors who have asked their system to reduce motion: the scrolling
capability bands stop, entrance animations are removed, and films load with ordinary
controls instead. The bands also pause on hover or keyboard focus.