Prüfkriterium 9.1.4.10: Inhalte brechen um

So vielfältig wie die Nutzenden sind heute auch Webseiten. Gerade mit Blick auf das Layout müssen sie das auch sein. Denn von der Bildschirmgröße hängt auch die Gestaltung einer Website ab. Ihre Inhalte müssen auf den unterschiedlichsten Endgeräten lesbar und bedienbar sein; von Monitoren und Laptops über Tablets und Smartphones bis hin zu Smartwatches. Was auf einem Desktop nebeneinander passt, muss auf einem Handy vielleicht untereinander angeordnet sein. Genau hier kommt der Prüfschritt 9.1.4.10 Inhalte brechen um ins Spiel.

Warum ist das wichtig für die Barrierefreiheit?

Im Unterschied zum Prüfkriterium „Text auf 200 Prozent vergrößerbar“ geht es hier nicht um die Vergrößerbarkeit des Textes. Vielmehr sollen die Inhalte beim Reinzoomen oder bei schmalen Displays (z. B. beim Smartphone) so umbrechen, dass mehrspaltige Layouts zu einspaltigen werden.

Dieses Website-Verhalten betrifft alle User. Ignorieren Website-Inhalte den ihnen zur Verfügung stehenden Display-Platz, können folgende Schwierigkeiten auftreten:

• Texte und Bilder überlappen sich gegenseitig
• Bedienelemente verschwinden komplett oder teilweise verschwinden
• Der User muss nun nicht mehr nur vertikal, sondern auch horizontal scrollen

Damit ist die Bedienbarkeit deutlich erschwert, insbesondere für Menschen mit motorischen Einschränkungen oder Seheinschränkungen. Sie können die weitere Scroll-Bewegung eventuell nicht durchführen oder verlieren bei starkem Zoom den Überblick über die. Außerdem stehen den Nutzenden womöglich nicht mehr alle Inhalte und Funktionen der Website zur Verfügung. Sie verschwinden schlicht aus dem Sichtfeld.

Die Gefahr ist also sehr groß, dass viele Nutzende – egal ob mit oder ohne Behinderung – die Seite verlassen und nicht mehr besuchen, zumindest nicht auf dem Smartphone oder Tablet. Das wäre ein spürbarerer Verlust an Usern: Laut aktuellen Daten von statcounter greifen rund 44 Prozent der Menschen in Deutschland ausschließlich mit mobilen Endgeräten auf Webinhalte zu. Tendenz steigend. Global betrachtet liegt der Anteil sogar bei rund 60 Prozent.

Was fordert der Prüfschritt konkret?

Die bereits beschriebenen drei Schwierigkeiten sind mit Blick auf die Barrierefreiheit inakzeptabel. Damit sie nicht auftreten, müssen die Website-Inhalte bei einer Breite des Browsersfensters von 320 CSS-Pixeln beziehungsweise von 1280 CSS-Pixeln und 400-fachen Zoom so umbrechen, dass alle Informationen und Funktionalitäten erhalten bleiben. Dabei dürfen sich Elemente verändern, z. B. kann aus einer Navigationsleiste ein Hamburger-Menü werden.

Es gibt bestimmte Ausnahmen, bei denen das Prüfkriterium auch dann als erfüllt gilt, wenn horizontales Scrollen erforderlich ist. Nämlich, wenn Datentabellen, Bilder, Diagramme, Videos, Spiele oder Benutzerschnittstellen mit Werkzeugleisten nur aufgrund eines zweidimensionalen Layouts genutzt werden können.

Tipps zur Umsetzung

Bei der Entwicklung eines modernen und responsiven Layouts helfen die folgenden Techniken:

• Mit flexiblen Einheiten wie Prozenten oder „em“ arbeiten statt festen Pixelwerten.
• CSS Media Queries nutzen, um Inhalte je nach Bildschirmgröße anders anzuordnen.
• Grid- und Flexbox-Systeme einsetzen, die ein dynamisches Layout ermöglichen.

Ob alles wie gewünscht umbricht, ist leicht im Selbsttest zu überprüfen. Hierfür am besten die Browser Chrome und Firefox auf unterschiedlichen Endgeräten installieren und die eigene Website aufrufen. Prüfen Sie, ob auch bei 400-fachem Zoom alle Inhalte erhalten und funktional bleiben.

Fazit

„Inhalte brechen um“ klingt technisch, ist aber ein echter Gamechanger für die digitale Barrierefreiheit. Wer seine Webseite flexibel gestaltet, sorgt dafür, dass alle Nutzenden, unabhängig von Gerät oder Sehfähigkeit, die Inhalte problemlos erfassen und bedienen können. Und das ist nicht nur inklusiv, sondern auch zukunftssicher.

Autorin: Stiftung Pfennigparade