WCAG 2.1 - 1.4.10
Reflow
Inhalte können ohne Verlust von Informationen oder Funktionalität und ohne dass ein Scrollen in zwei Dimensionen erforderlich ist, präsentiert werden für:
Inhalt
Was steht in den Guidelines zum Success Criterium 1.4.10 - Reflow?Was Bedeutet das Success Criterium 1.4.10 - Reflow?Warum ist es so wichtig, das Success Criterium 1.4.10 - Reflow zu beachten?Was hat das Success Criterium 1.4.10 - Reflow mit dem BFSG zu tun?Lösungen für 1.4.10 - Reflow anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.10 - Reflow?Was steht in den Guidelines zum Success Criterium 1.4.10 - Reflow?
Implementationshinweise
- Vertikaler Scrollinhalt mit einer Breite von 320 CSS-Pixeln;
- Horizontal scrollender Inhalt in einer Höhe von 256 CSS-Pixeln;
Was Bedeutet das Success Criterium 1.4.10 - Reflow?
Das Success Criterion 1.4.10 – Reflow (Umfluss) verlangt, dass Inhalte auch auf kleineren Bildschirmen oder bei starker Vergrößerung zugänglich und nutzbar bleiben. Inhalte müssen so gestaltet sein, dass sie bei einer Breite von 320 CSS-Pixeln (etwa die Breite eines Smartphones) dargestellt werden können, OHNE dass dabei horizontales Scrollen nötig ist. Vertikales Scrollen ist erlaubt und sogar normal. Außerdem muss auch bei bis zu 400% Zoom alles les- und bedienbar bleiben.
Praktisch bedeutet das:
- Die Seite muss responsiv gestaltet sein, sodass sich das Layout und die Inhalte flexibel an verschiedenste Bildschirmgrößen anpassen.
- Abschnitte, Bilder und Texte dürfen nicht aus dem sichtbaren Bereich hinausragen.
- Benutzer*innen sollen nie nach rechts und links scrollen müssen, um den Inhalt zu lesen oder Bedienelemente zu erreichen.
Wie kann man das technisch sicherstellen?
- Layouts sollten mit flexiblen Einheiten (z.B. Prozent,
em,rem) statt festen Pixelwerten gebaut werden. - Nutzen Sie CSS Media Queries, um das Layout dynamisch anzupassen.
- Vermeiden Sie fixe Containerbreiten oder verhindern Sie, dass sich einzelne Komponenten breiter als der Bildschirm ausdehnen.
Prüfen Sie Ihre Seite, indem Sie das Browserfenster klein machen oder zoom stark auf 400% stellen: Sind alle Funktionen und Inhalte noch benutzbar, ohne dass man horizontal scrollen muss? Dann sind Sie auf dem richtigen Weg!
Warum ist es so wichtig, das Success Criterium 1.4.10 - Reflow zu beachten?
Reflow ist essenziell, damit alle Nutzerinnen – besonders Menschen mit Sehbeeinträchtigungen – Ihre Inhalte problemlos konsumieren können, zum Beispiel indem sie die Seite stark vergrößern (Zoom) oder ein kleines Endgerät verwenden. Ohne Reflow kann Text abschneiden, Buttons oder Formulare werden unzugänglich, und Nutzerinnen verlaufen sich auf Ihrer Seite. Das führt dazu, dass grundlegende Informationen oder Funktionen – etwa Bestell- oder Kontaktformulare – nicht erreichbar sind.
Was hat das Success Criterium 1.4.10 - Reflow mit dem BFSG zu tun?
Das BFSG (Barrierefreiheitsstärkungsgesetz) verpflichtet öffentliche Stellen und bestimmte private Unternehmen, digitale Angebote (einschließlich Websites) vollständig barrierefrei zu gestalten. Eine Seite, die das Kriterium 1.4.10 nicht erfüllt, ist für Menschen mit Sehbehinderung oder mobil eingeschränkte Nutzer*innen oft nicht nutzbar und somit nach deutschem Recht nicht BFSG-konform. Der Umfluss ist also zwingende Voraussetzung für die rechtliche Barrierefreiheit eines Webangebots.
Lösungen für 1.4.10 - Reflow anhand von Codebeispielen
Falscher Code
<div style="width:1200px">Hier steht viel Inhalt, der auf kleinen Bildschirmen nicht komplett sichtbar ist und zu Horizontal-Scrollen zwingt.</div>Korrekter Code
<div style="max-width:100%; width:100%;">Dieser Inhalt bleibt immer im sichtbaren Bereich, ganz egal, wie breit der Bildschirm ist.</div>Der schlechte Code fixiert die Breite auf 1200px. Das führt bei kleinen Bildschirmen oder starkem Zoom dazu, dass Nutzer*innen horizontal scrollen müssen. Im guten Beispiel passt sich die Breite flexibel an die Bildschirmgröße an.
Falscher Code
.spalte { width: 800px; float: left; }Korrekter Code
.spalte { max-width: 100%; width: 100%; box-sizing: border-box; }Im schlechten Beispiel kann sich eine Spalte auf (kleinen) Bildschirmen über den sichtbaren Bereich hinaus ausdehnen. Die gute Lösung sorgt dafür, dass die Spalte immer maximal so breit ist wie der Bildschirm (ohne horizontales Scrollen).
Wie löse ich Verstöße gegen das Success Criterium 1.4.10 - Reflow?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.