Farben sind Tokens, und Kontrast ist eine berechnete Zahl
Die Palette steht in einem Block aus 14 Variablen, und der Sekundärtext verwendet einen einzigen Token: `--muted: #666b65`. Die Verhältnisse, neu berechnet mit der Formel der relativen Luminanz aus WCAG auf den sieben Hintergründen der Site: 5,45:1 auf Weiß, 5,15, 5,11, 5,03, 5,02, 4,79 und 4,72. Der Haupttext, `--ink: #181a19`, erreicht 17,49:1 auf Weiß; das grüne Akzent `#355c46`, 7,58:1. Wenn eine Farbe den Schwellenwert nicht erreicht, wird der Token geändert, nicht in einer Sitzung argumentiert.
Komponenten haben Tastaturmuster, nicht nur Aussehen
Die Tab-Gruppe auf der Startseite verwendet roving tabindex: Nur der aktive Tab ist mit Tab erreichbar, die anderen sind aus der Reihenfolge herausgenommen, und die Pfeile links/rechts, Home und End verschieben den Fokus, wobei das Standardverhalten der Taste aufgehoben wird. Es ist das Muster aus den empfohlenen Praktiken für zugängliche Komponenten, umgesetzt, nicht zitiert. In den Grundkomponenten der Site gibt es 21 zugängliche Beschriftungen, 7 Zustände gedrückt/nicht gedrückt, 3 Verknüpfungen zwischen Titel und Region, 2 Auswahlzustände, 2 Regionen, die Änderungen ankündigen, und 2 Verknüpfungen zwischen einem Befehl und dem Panel, das er steuert.
Bewegung hat eine Stop-Schaltfläche und schaltet sich bei der Systemeinstellung ab
Auf der Startseite gibt es 38 endlos animierte Elemente, automatisch gestartet, die länger als fünf Sekunden dauern — genau die Situation, die durch das Kriterium „Pausieren, Stoppen, Ausblenden“ geregelt ist. Alle 38 werden von Pausen-Schaltflächen abgedeckt: Beim Drücken wechseln die Animationen in den gestoppten Zustand und der Zustand der Schaltfläche ändert sich. Separat hebt bei `prefers-reduced-motion: reduce` eine globale Regel jede Animation und jeden Übergang auf, stoppt das sanfte Scrollen, entfernt die Bewegung beim Mouseover und blendet die Pausen-Schaltfläche aus. Im Haupt-Stylesheet gibt es sieben solche Blöcke, plus einen im Basis-Stylesheet.
Sichtbarer Fokusindikator, nur wo er hingehört
2 px solide Kontur, in Akzentgrün, mit 5 px Abstand, angewendet über `:focus-visible` — also erscheint sie bei Tastaturnavigation und nicht beim Klick mit der Maus. Im Browser geprüft, Element für Element, im Kopfbereich und bei den ersten Befehlen im Inhalt: vier verschiedene Elemente, dieselbe Kontur. Nirgendwo im Stylesheet gibt es eine entfernte Kontur ohne Ersatz.
Formulare, die ihre Zustände ankündigen
Im Kontaktformular der Site sind Beschriftungen implizit auf Feldern, der Fehler ist als Alert markiert und die Bestätigung als Status — so kündigen Bildschirmleser sie an, ohne dass der Benutzer suchen muss. Die Falle für Bots ist korrekt verborgen: übergeordnetes Element ohne Anzeige, als für Assistive Technologien verborgen markiert und aus der Tab-Reihenfolge entfernt. Das eigene Audit bestätigt, dass die Regeln für Beschriftung, Namen für Steuerelemente und automatische Vervollständigung alle bestehen.
Die Prüfung erfolgt mit einem Werkzeug, auf echten Seiten
Wir führen axe-core 4.10.2 auf der Live-Seite aus, nicht in einer Testumgebung, auf einer Stichprobe von zehn Seiten, die unterschiedliche Muster abdecken: Startseite, Katalog, eine Produktseite, das Service-Index, eine Serviceseite, die Lösungsmatrix, eine Kombination aus der Matrix, Kontakt, Preise, ein Artikel und ein Rechtsdokument. Das Rohresultat wird auf der Seite geschrieben, mit der Anzahl der Knoten, nicht als „konform“ zusammengefasst.
Was durchfiel, wird veröffentlicht, nicht gerundet
Aus demselben Audit: bei 320 px Breite ragen der Befehl im Kopfbereich und die Menütaste um 22 px über den Bildschirm hinaus, und die Seite scrollt horizontal — die Arithmetik ergibt 362 px Inhalt in einem 280 px breiten Container. In den Rechtsdokumenten unterscheiden sich die Links im Text vom umgebenden Text nur durch die Farbe, und das Verhältnis zwischen Akzent und Fließtext beträgt 1,01:1, also ist Unterstreichung verpflichtend. Beide sind offen, mit geschriebener Behebung. Wir veröffentlichen sie, weil ein Käufer, der Zugänglichkeit verlangt, sehen soll, wie eine echte Fehlerliste aussieht.
Kein Dark Mode — gesagt, nicht simuliert
Die Website hat kein dunkles Theme. Der Token-Block ist für drei Selektoren deklariert, die identische Werte erhalten, und im Code gibt es keine Regel für die System-Farbmoduspräferenz. Im Browser mit emulierter dunkler Farbschema getestet: Die Seite bleibt weiß. Die nützliche Folge: Alle gemessenen Kontrastverhältnisse gelten in beiden Schemas. Die unangenehme Folge: Der Theme-Schalter ist aus Sicht der Farbe toter Code. Ein echtes dunkles Theme bedeutet eine vollständige Neumessung des Kontrasts, nicht das Kopieren von Werten.
Typografie mit Regeln, nicht mit Vorlieben
Eine einzige Familie für Überschriften und Text, mit je nach Ebene angepasstem Buchstabenabstand — enger bei großen Überschriften, `-0,055em` auf den Ebenen eins und zwei, `-0,035em` auf Ebene drei — und Gewicht 500 bei Überschriften. Absätze verwenden Zeilenausgleich, damit am letzten Rand kein einzelnes Wort stehen bleibt. Der Container hat eine maximale Breite von 1240 px mit 48 px Seitenabständen, und die Schaltflächen haben überall die gleiche Zeilenhöhe. Es sind Regeln im Stylesheet, also gelten sie auch nach unserem Weggang.