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.

    Abonnieren

    Standard-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.

    Abonnieren

    Border 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.

    Abonnieren

    Schriften wachsen, Layout reflowt, alle Übergänge auf instant. Auch eine ältere Nutzerin mit Browser-Zoom kommt komfortabel zum CTA.

Dieselbe Komponente in drei System-Konfigurationen. Adaptive Reduktion bedeutet: eine Codebasis, viele passende Erscheinungen.

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.