ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Kann dauern
Wichtig für Rolle:
Entwicklung
Zum WCAG-Kriterium:
Reflow (englisch)Worum geht's?
Inhalte sollten so gestaltet sein, dass User nur in eine Richtung scrollen müssen, um sie zu lesen. Das gilt bei Smartphones für eine Breite von:
- 320 Pixel für Inhalte, die vertikal (auf und ab) gescrollt werden
- Und 256 Pixel für Inhalte, die horizontal (links und rechts) gescrollt werden.
Die zwei Maße wurden deshalb gewählt, weil es sehr gängige Viewportbreiten sind.
Bei einem Desktop-Browser auf einem 1280 px breiten Monitor und bei einer Vergrößerung von 400 % entspricht die Breite des Viewports ca. 320 px. Darum wird das Kriterium auch oft 400 % Zoom genannt.
Es werden von Prüfern allerdings beide Varianten (Desktop mit 400 % Zoom und Ansicht auf dem Smartphone bei 320 px Breite ohne Zoom) getestet und nur eine davon muss erfüllt werden.
Umsetzung
Nutze die für deine Situation passende Technik, um das Erfolgskriterium zu erfüllen.
Gestalte Websites responsive
HTML und CSS bieten alle Mittel, um Inhalte auf allen Bildschirmgrößen korrekt darzustellen. Mit Flexbox, Grid und Media-Queries lässt sich festlegen, wie Inhalte bei unterschiedlichen Viewports umbrechen. Eine sauber gestaltete Website hat heute in der Smartphone-Ansicht kaum noch Probleme mit horizontalem Scrollen.
Lasse Texte richtig umbrechen
Ein häufiges Problem sind lange Wörter, die nicht richtig umbrechen, wodurch auf kleineren Ansichten ein horizontaler Scrollbalken entsteht.
Um das zu vermeiden, kannst du die CSS-Property
word-wrap: break-word;nutzen. Das bricht zwar ein Wort nicht unbedingt immer an der richtigen Stelle um, dafür zerschießt es aber nicht das ganze Layout.WCAG-Technik(en) in Englisch:
Anmerkungen
Ausnahme: Inhalt, der nicht umbrechen kann
Es gibt Inhalte, die gar nicht umbrechen können. Dazu zählen Videos, Fotos oder Tabellen. Hier ist es ok, wenn horizontal gescrollt werden muss, um diese Inhalte komplett zu sehen.
Manchmal ist auch die feste Anordnung des Layouts für das Verständnis wichtig, etwa wenn Kommentare direkt neben einem Text angezeigt werden müssen (wie in Google Docs).
Ausnahme: Geöffnete Select-Elemente
Es ist okay, wenn beim Zoom Inhalte von geöffneten Dropdowns abgeschnitten werden und man scrollen muss, um sie zu lesen. Man hat kaum Kontrolle darüber, wie sich ein natives
<select> verhält, sodass es teilweise einfach nicht anders geht.
DAs Accessbility-Center
Teste selbstständig auf digitale Barrierefreiheit!
Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!
- Alle Prüfschritte leicht erklärt
- Teile und exportiere Prüfberichte
- Teste direkt auf der Live-Webseite!
