1. Was ist das Ziel dieses Kriteriums?
Mobile Geräte haben den Bildschirm erobert wie der Espresso das Büro – sie sind überall. Aber was passiert, wenn Menschen ihre Websites auf 400% vergrößern müssen, um überhaupt etwas zu erkennen? Oder wenn der Browser auf einem halben Bildschirm läuft, weil jemand gleichzeitig arbeitet und surft?
Das Ziel von Erfolgskriterium 1.4.10 der WCAG ist klar: Inhalte sollen sich an veränderte Bildschirmgrößen anpassen können, ohne dass wichtige Informationen verschwinden oder unlesbar werden. Konkret bedeutet das: Websites müssen auch dann funktionieren, wenn sie in sehr schmale Viewports gequetscht werden – ohne dass Nutzer in beide Richtungen scrollen müssen, um eine Textzeile zu lesen.
2. Was fordert das Erfolgskriterium genau?
Das Kriterium fordert, dass Inhalte ohne Informations- oder Funktionsverlust dargestellt werden können, ohne dass zweidimensionales Scrollen erforderlich ist:
Für vertikal scrollende Inhalte: Müssen bei einer Breite von 320 CSS-Pixeln lesbar sein (das entspricht einem 1280-Pixel-Viewport bei 400% Zoom).
Für horizontal scrollende Inhalte: Müssen bei einer Höhe von 256 CSS-Pixeln lesbar sein (entspricht einem 1024-Pixel-Viewport bei 400% Zoom).
Ausnahmen gelten für:
- Inhalte, die zweidimensionales Layout für Verständnis oder Funktion benötigen
- Datentabellen (aber nicht die einzelnen Zellen!)
- Karten und Diagramme
- Video-Player und Präsentationen
- Schnittstellen mit persistent sichtbaren Werkzeugleisten
Ein praktisches Beispiel: Eine News-Website kann ihre Artikel-Teaser normalerweise in drei Spalten anzeigen. Bei schmalen Viewports stapeln sich diese Teaser untereinander – alle Informationen bleiben verfügbar, nur die Anordnung ändert sich.
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du musst eine Website bei 400% Zoom nutzen, um die Schrift überhaupt lesen zu können – aber jede Textzeile verschwindet rechts aus dem Bildschirm. Du müsstest permanent hin- und herscrollen, um einen einzigen Satz zu erfassen.
Reflow schafft Barrierefreiheit, weil es:
- Menschen mit Sehbehinderungen ermöglicht, Inhalte stark zu vergrößern, ohne die Lesbarkeit zu verlieren.
- Nutzern in mobilen Situationen hilft, wenn nur ein schmaler Viewport zur Verfügung steht.
- Menschen mit motorischen Einschränkungen das anstrengende Hin- und Herscrollen erspart.
- Kognitiven Belastungen reduziert, weil die Leserichtung konsistent bleibt.
- Die Orientierung auf der Seite erleichtert, auch bei starker Vergrößerung.
Und nebenbei: Responsive Design ist heute Standard – Reflow stellt sicher, dass diese Flexibilität auch bei extremen Zoom-Stufen funktioniert.
4. So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Moderne responsive Websites erfüllen oft schon viele Anforderungen. Aber bei extremem Zoom kommen die wahren Herausforderungen zum Vorschein.
Grundlegende Techniken:
CSS Media Queries nutzen: Definiere Breakpoints für schmale Viewports und passe das Layout entsprechend an. Besonders wichtig ist der 320px-Breakpoint.
Flexbox und CSS Grid: Diese modernen Layout-Methoden helfen dabei, Inhalte automatisch umzubrechen und neu anzuordnen.
Relative Einheiten verwenden: em, rem und % statt feste Pixel-Werte – so skaliert alles proportional mit.
Sticky Elemente auflösen: Header, Footer oder Sidebars, die bei großen Bildschirmen "kleben", sollten bei schmalen Viewports normal mitscrollen.
Hamburger-Menüs: Verstecke komplexe Navigation hinter einem ausklappbaren Menü-Button.
Typische Fallstricke vermeiden:
- Tabellen in scrollbare Container packen, damit sie die Seitenbreite nicht sprengen
- Bilder und Videos mit max-width: 100% begrenzen
- Lange URLs oder Code-Zeilen sollten umbrechen können
- Fixed-Width-Container durch flexible Alternativen ersetzen
Test-Tipp: Setze deinen Browser auf 1280px Breite, zoome auf 400% und prüfe, ob alle Inhalte ohne horizontales Scrollen lesbar bleiben. Oder verkleinere das Browser-Fenster einfach auf 320px Breite.
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Reflow ist nicht nur eine Accessibility-Anforderung – es ist ein echter Business-Vorteil in unserer zunehmend mobilen Welt.
1. Zielgruppe massiv erweitern
Über 285 Millionen Menschen weltweit haben Sehbehinderungen. Dazu kommen alle, die temporär mit eingeschränkten Sichtmöglichkeiten kämpfen: Handy-Nutzer in hellem Sonnenlicht, ältere Menschen, Personen mit Kopfschmerzen. Reflow macht deine Inhalte für alle diese Gruppen zugänglich.
2. Mobile-First wird Mobile-Perfect
Mit Reflow stellst du sicher, dass deine Website nicht nur auf mobilen Geräten funktioniert, sondern auch bei Split-Screen-Nutzung, Tablet-Modi oder wenn Nutzer extreme Zoom-Stufen benötigen. Das ist echter Mobile-Komfort.
3. Zukunftssicherheit schaffen
Neue Geräte-Formate entstehen ständig: foldable Phones, Smartwatches, verschiedenste Screen-Ratios. Websites mit gutem Reflow passen sich automatisch an – ohne dass du für jedes neue Gerät redesignen musst.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3C
Success Criterion 1.4.10 Reflow (Level AA)
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
Note 1: 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.
Note 2: Examples of content which requires two-dimensional layout are images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content. It is acceptable to provide two-dimensional scrolling for such parts of the content.