Stufe AA · WCAG 2.1

1.4.10 Reflow (Umbruch)

Inhalte brechen bei 320 CSS-Pixeln Breite in eine Spalte um, ohne waagerechte Scrollleiste — das entspricht 400% Zoom am Desktop.

Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.

Kostenlosen Scan anfordern

Woran es in der Praxis scheitert

Eine Preistabelle, die auf schmalen Bildschirmen die ganze Seite seitwärts schiebt. Ein Modal mit fester Breite, das seine eigenen Buttons aus dem Bild drückt.

Wie man es repariert

Lassen Sie Layouts umbrechen. Wo eine Datentabelle die Breite wirklich braucht, scrollt diese Tabelle in ihrem eigenen Bereich statt des ganzen Dokuments.

Auf einen Blick

Stufe: Stufe AA — die Stufe, die EN 301 549 verlangt, und damit die, an der BFSG und EAA gemessen werden.
Prinzip: Wahrnehmbar
Richtlinie: 1.4 Unterscheidbar
Neu in: WCAG 2.1
EN 301 549: 9.1.4.10
Englische Bezeichnung: Reflow
Automatische Prüfung: Teilweise automatisch

Offizielle Definition beim W3C lesen

So prüfen Sie es von Hand

Stellen Sie das Browserfenster auf 1280 CSS-Pixel Breite und zoomen Sie auf 400 % – dann bleiben die 320 Pixel, die das Kriterium nennt. Der responsive Modus mit 320px Breite zeigt dasselbe.
Lesen Sie die ganze Seite. Sie sollten immer nur in eine Richtung scrollen müssen; eine Seite, die zusätzlich seitwärts scrollt, erfüllt das Kriterium nicht.
Datentabellen, Karten, Diagramme und Werkzeugleisten dürfen in ihrem eigenen Bereich in zwei Richtungen scrollen – der Rest der Seite nicht.
Prüfen Sie, dass nichts abgeschnitten wird oder Inhalte verdeckt: Sticky Header, Cookie-Banner und Chat-Widgets sind bei dieser Breite die üblichen Verdächtigen.

Im Code

Nicht erfüllt

.page { width: 1200px; }

.price-table { width: 960px; }

Erfüllt

.page { max-width: 1200px; width: 100%; }
.table-wrap { max-width: 100%; overflow-x: auto; }

<!-- Eine Datentabelle darf scrollen – in ihrem eigenen
     Bereich, den die Tastatur erreicht -->
<div class="table-wrap" tabindex="0" role="region" aria-label="Preise">
  <table>…</table>
</div>

Teilweise automatisch

Wie weit eine automatische Prüfung kommt

Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.

Wir setzen jede Seite noch einmal bei 320px Breite und vergleichen sie mit dem breiten Layout: seitliches Scrollen, abgeschnittener oder überlappender Text und verschwundener Inhalt. Das findet die häufigen Fehler, nicht jeden — ein sauberes Ergebnis ist also kein Bestehen.

Wo es besonders zählt

Leitfäden, in denen dieses Kriterium zu den ersten Prüfpunkten gehört.

Weiterlesen

Reflow
Inhalte bleiben bei 320 CSS-Pixel Breite – das entspricht 400 % Zoom bei 1280 Pixel – ohne Scrollen in zwei Richtungen nutzbar (WCAG 1.4.10, Stufe AA).

Finden Sie heraus, welche Kriterien Ihre Website verfehlt

Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.

Kostenlosen Scan anfordern So testet der Agent

Bericht innerhalb eines Werktags.