Flexible Darstellung

Webseiten sollten auf beliebigen Endgeräten so darstellbar sein, dass die Inhalte leserlich sind. Damit hochauflösende Bildschirme, kleine Displays mobiler Endgeräte sowie benutzerdefinierte Schriftgrößen berücksichtigt werden können, darf eine Textvergrößerung weder zu Überlagerungen noch zu abgeschnittenen Inhalten führen. Insbesondere soll die Schrift mindestens auf das zweifache der Ausgangsgröße im Browser vergrößert werden können. Bei einer Schriftvergrößerung sollte sich das Layout so anpassen, dass horizontales Scrollen vermieden wird.

Darstellung einer Seite dieses Webauftritts bei Seitenzoom 100% und 1360px Bildschirmbreite — Seitenzoom 100%

Darstellung bei Seitenzoom 125%: Layout wird größer und breiter — Seitenzoom 125%

Darstellung bei 150%: Texte im Inhalt brechen um — Seitenzoom 150%

Darstellung bei 175%: Text wird weiter zu einer schmalen Spalte zusammengeschoben — Seitenzoom 175%

Darstellung bei 200%: Text wird unterhalb der Navigation statt rechts neben der Navigation angezeigt. — Seitenzoom auf 200%

Ein optimiertes Layout ist heute nicht mehr ein pixelgenaues Design sondern ein flexibel einsetzbares Design.

Über die Textvergrößerung hinaus gibt es weitere Anforderungen der Web Content Accessibility Guidelines (WCAG) 2.0 resp. Barrierefreien Informationstechnik-Verordnung – BITV 2.0, die die visuelle Präsentation betreffen. Es handelt sich um typografische Aspekte, die vor allem die Leserlichkeit betreffen.

Die folgende Liste fasst die Inhalte der Beiträge im Bereich "Flexible Darstellung" zusammen.

Die reine Schriftvergrößerung (2012): Anders als der Seitenzoom wirkt sich die Schriftvergrößerung nur auf die Bereiche einer Seite aus, die im CSS mit relativen Maßeinheiten bemaßt wurden. Das sollten in erster Linie Schriftgrößen sein, aber relative Einheiten können grundsätzlich überall dort verwendet werden, wo Längenmaße zulässig sind. In den WCAG 2.2 werden relative Schriftgrößen nicht verlangt, aber Best-Practice sind sie dennoch.
Minimale Schriftgrößen für das Web (2012): Die Einstellung einer Mindestschriftgröße kann in verschiedenen, aber nicht allen Browsern vorgenommen werden. Bei der Festlegung der Mindestschriftgröße handelt es sich um eine Einstellung, die eine Veränderung des Designs erzwingt und somit zu Textüberlagerungen oder abgeschnittenen Texten führen kann. Auch wenn man sich auf pixelgenauen Layouts und Seitenzoom für die Textvergrößerung verlässt, können Nutzereinstellungen dazu führen, dass eine Seite unleserlich wird. Wenn Webentwickler die Einstellungen zur Mindestschriftgröße berücksichtigen, verbessern sie die Zugänglichkeit und Nutzbarkeit ihrer Webseiten.
Gedanken zur Silbentrennung (2026): Die Silbentrennung auf Webseiten sollte zurückhaltend eingesetzt werden. Als Technik ist die hyphens-Eigenschaft in CSS zu bevorzugen. Die HTML-Entity  verursacht hingegen Probleme in Screenreadern. Silbentrennung wird dabei oft bei Blocksatz benötigt, jedoch sollte der geschlossene Zeilenfall eigentlich vermieden werden.