Prinzip P1
Adaptive Reduktion
Reduktion ist kein fixer Zustand, sondern eine Antwort auf den Kontext der Nutzer:in.
Warum dieses Prinzip wichtig ist
Eine Webseite, viele Nutzungskontexte — was „reduziert“ bedeutet, hängt davon ab, wer wann unter welchen Bedingungen darauf zugreift.
Reduktion ist nicht das Gegenteil von Vielfalt. Eine adaptive Webseite zeigt für jede Nutzerin und jeden Kontext genau die reduzierte Form, die in diesem Moment passt — ohne in einen Varianten-Zoo zu zerfallen, der mehrfach gepflegt werden muss.
Das wirtschaftliche Argument ist banal und stark: Anstatt für mobile Endgeräte, sehbeeinträchtigte Nutzer, Slow-Connection-Szenarien oder ältere Bildschirme jeweils eigene Layouts zu pflegen, hält ein adaptives System diese Vielfalt mit einer einzigen Codebasis ab. Sie investieren einmal und sparen dauerhaft.
Konkret heißt das: Schriftgrößen, Kontrastwerte und Bewegungsumfang sind nicht fix in Ihre Designsprache eingeschrieben, sondern reagieren auf System-Einstellungen wie „Bewegung reduzieren“, „Mehr Kontrast“ oder „Vergrößerter Text“. Was unsichtbar im Hintergrund passiert, zeigt für jede Person den richtigen Reduktionsgrad.
Wie sich derselbe Code unterschiedlich zeigt
Dieselbe Komponente, drei System-Konfigurationen. Adaptive Reduktion bedeutet: passende Erscheinung statt fixiertem Layout.
Newsletter
Ein Mal im Quartal, ein neues Thema rund um barrierefreies Webdesign. Kein Tracking.
AbonnierenStandard-Kontrast, Standard-Animation, 16-px-Body. Die Designsprache, wie sie der Großteil der Nutzer:innen sieht.
Newsletter
Ein Mal im Quartal, ein neues Thema rund um barrierefreies Webdesign. Kein Tracking.
AbonnierenBorder und Texte verstärkt, Akzentkontrast nach oben getrieben. Greift, sobald das Betriebssystem mehr Kontrast verlangt.
Newsletter
Ein Mal im Quartal, ein neues Thema rund um barrierefreies Webdesign. Kein Tracking.
AbonnierenSchriften wachsen, Layout reflowt, alle Übergänge auf instant. Auch eine ältere Nutzerin mit Browser-Zoom kommt komfortabel zum CTA.
Best Practice und Anti-Pattern
Drei Designentscheidungen, die regelmäßig zur Bedienhürde werden — und ihre adaptiven Alternativen.
Anti-Pattern
Eine Schriftgröße für alle Endgeräte
16-px-Body wirkt auf 4K-Monitoren mickrig, auf 360-px-Smartphones eng. Eine statische Größe ignoriert die reale Verteilung von Bildschirmen.
Best Practice
Fluid Typography mit clamp()
Schrift wächst kontinuierlich mit der Viewport-Breite, ohne harte Brüche an Breakpoints.
Anti-Pattern
Layout bricht bei Browser-Zoom 200 %
Fixe Pixel-Container produzieren horizontalen Scroll, der WCAG 1.4.10 verletzt.
Best Practice
Reflow-fähiges Layout
Logische Container, Grid mit auto-fit, keine harten Pixel-Annahmen.
Anti-Pattern
Hover-only Interaktionen
Tooltips, die nur per Maus erscheinen, fallen auf Touch-Geräten und für Tastatur-Nutzer:innen aus.
Best Practice
Eingabe-agnostische Bedienlogik
Tap, Click, Tastatur und Sprache führen zum selben Ergebnis.
Anbindung an WCAG 2.2
Die normativen Erfolgskriterien, an denen dieses Prinzip operativ andockt.
- SC 1.4.4Resize TextAA
- SC 1.4.10ReflowAA
- SC 1.4.12Text SpacingAA
Verwandte Prinzipien
Adaptive Reduktion lehnt sich an diese Prinzipien an.
Wie viele Nutzungskontexte deckt Ihre Website heute systematisch ab?
Neun Fragen, etwa vier Minuten. Kein Login.