WCAG 2.1, 1.4.10, AA

Reflow (Umbruch)

  • WCAG: 2.1
  • Stufe: AA
  • Thema: Flexibilität der Anzeige

Inhalt muss sich den Viewport-Mindestdimensionen anpassen (sog. Reflow). Dies ermöglicht Menschen mit Sehbehinderungen, alle Inhalte auch bei hoher Vergrösserung nutzen zu können, ohne in mehr als eine Richtung scrollen zu müssen.

Verstehen

Menschen mit Sehbehinderungen arbeiten häufig mit niedriger Bildschirmauflösung und/oder hohem Zoom-Faktor. Web-Inhalte müssen entsprechend auch unter diesen Umständen korrekt angezeigt werden (ohne Überlappungen oder sonstwie störende Effekte), wobei nur in eine Richtung gescrollt werden darf (entweder horizontal oder vertikal, nicht aber beides). Siehe auch 1.3.4.

Die vorgegebene Mindest-Auflösung hierfür ist 320x256 CSS-Pixel. Ein typisches Problem etwa sind zu lange Wörter, welche zu einem Scrollbedarf in mehrere Richtungen führen oder Überlappungen verursachen.

Ausnahmen: Bei Bildern, Karten, Diagrammen, Videos, Spielen, Datentabellen und Webapplikationen, bei denen eine Toolbar sichtbar bleiben muss, darf auch in zwei Richtungen gescrollt werden.

Verantwortlichkeiten

  • Das Designteam definiert die Inhalte so, dass der Reflow berücksichtigt wird.
  • Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um und sorgt dafür, dass der Reflow wie vorgeschrieben funktioniert.
  • Die Inhaltsverantwortlichen kontrollieren die erstellten Inhalte auf ihre korrekte Darstellung in den Viewport-Mindestdimensionen.

WCAG-Text

Inhalte können ohne Informations- oder Funktionsverlust und ohne die Notwendigkeit, in zwei Dimensionen zu scrollen, präsentiert werden:

- vertikal scrollender Inhalt mit einer Breite, die 320 CSS-Pixeln entspricht;

- horizontal scrollender Inhalt in einer Höhe, die 256 CSS-Pixeln entspricht.

Ausgenommen sind Teile des Inhalts, bei denen ein zweidimensionales Layout für die Verwendung oder Bedeutung erforderlich ist.

Anmerkung: 320 CSS-Pixel entsprechen einer Anfangsbreite des Viewports (Anzeigebereichs) von 1280 CSS-Pixeln Breite bei 400% Zoom. Bei Web-Inhalten, die für einen horizontalen Bildlauf konzipiert sind (z.B. mit vertikalem Text), entsprechen 256 CSS-Pixel einer Anfangshöhe des Viewports von 1024px bei 400% Zoom.

Anmerkung: Beispiele für Inhalte, die ein zweidimensionales Layout erfordern, sind Bilder, Karten, Diagramme, Videos, Spiele, Präsentationen, Datentabellen und Schnittstellen, bei denen es notwendig ist, Symbolleisten im Blickfeld zu behalten, während Inhalte bearbeitet werden.