WCAG 2.1 - 1.4.4
Resize text
Außer bei Beschriftungen und Bildern von Text kann Text ohne unterstützende Technologien bis zu 200 Prozent vergrößert werden, ohne dass Inhalte oder Funktionen verloren gehen.
Inhalt
Was Bedeutet das Success Criterium 1.4.4 - Resize text?Warum ist es so wichtig, das Success Criterium 1.4.4 - Resize text zu beachten?Was hat das Success Criterium 1.4.4 - Resize text mit dem BFSG zu tun?Lösungen für 1.4.4 - Resize text anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.4 - Resize text?Was Bedeutet das Success Criterium 1.4.4 - Resize text?
Das Success Criterion 1.4.4 der WCAG fordert, dass alle Texte auf einer Website – mit wenigen Ausnahmen – so gestaltet sein müssen, dass sie sich auf der Seite um bis zu 200% vergrößern lassen, ohne dass es dabei zu einem Verlust von Inhalten oder Funktionen kommt. Das heißt: Nutzer*innen müssen in der Lage sein, Texte einfach zu vergrößern (z.B. über die Zoomfunktion ihres Browsers oder durch eigene Einstellungen), ohne dass die Bedienbarkeit oder Lesbarkeit der Seite beeinträchtigt wird.
Technische Anforderungen:
- Texte (inkl. Formulareingaben, Überschriften, Navigation etc.) müssen mindestens um das Doppelte (200%) vergrößerbar sein.
- Alle Inhalte und Funktionen müssen dabei weiterhin zugänglich und sichtbar bleiben.
- Die Seite darf nicht horizontal scrollen müssen (außer bei ganz kleinen Bildschirmen oder bestimmten Komponenten wie Tabellen).
- Textgrafiken sind von dieser Regel ausgenommen – Texte in Bildern sollten allerdings ohnehin vermieden werden!
Häufige Stolperfallen
- Feste Schriftgrößen in px statt relativer Einheiten (em, rem).
- Layouts, die bei Vergrößerung auseinanderlaufen oder Inhalte überdecken.
- Inhalte, die aus dem Sichtbereich verschwinden oder nicht mehr bedienbar sind.
Wie lässt sich das testen?
Zum Beispiel, indem Sie im Browser (z.B. mit Strg + „+“) den Zoom auf 200% stellen und prüfen, ob der komplette Inhalt weiterhin ohne horizontales Scrollen und ohne Funktionsverlust zugänglich bleibt.
Warum ist es so wichtig, das Success Criterium 1.4.4 - Resize text zu beachten?
Viele Menschen haben eine Sehbehinderung oder brauchen größere Schrift, um Inhalte besser lesen zu können. Wenn Texte nicht skalierbar sind, werden diese Nutzer*innen vom Zugang zu den Informationen ausgeschlossen. Auch temporäre Einschränkungen – wie Lesen auf einem kleinen Bildschirm oder in heller Sonne – können davon betroffen sein.
Indem Webseiten die Vergrößerung von Texten unterstützen, wird eine wichtige Barriere abgebaut. Barrierefreiheit ist also nicht nur für einen kleinen Personenkreis relevant, sondern für alle, die gelegentlich oder dauerhaft auf größere Schrift angewiesen sind.
Was hat das Success Criterium 1.4.4 - Resize text mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Unternehmen und Organisationen in Deutschland, digitale Angebote barrierefrei bereitzustellen. Eine Seite, auf der sich Texte nicht zuverlässig vergrößern lassen, erfüllt die Mindestanforderungen der Barrierefreiheit nicht – sie wäre nicht BFSG-konform. Das betrifft Websites aller betroffenen Branchen und kann im Zweifel auch rechtliche Konsequenzen nach sich ziehen.
Lösungen für 1.4.4 - Resize text anhand von Codebeispielen
Falscher Code
<style>
p {
font-size: 18px;
}
</style>
<p>Dies ist ein Text, der nicht vernünftig vergrößerbar ist.</p>Korrekter Code
<style>
p {
font-size: 1.125rem; /* entspricht etwa 18px bei 16px Root-Größe */
}
</style>
<p>Dies ist ein Text, der sich mit der Browser-Zoomfunktion anpasst.</p>Im schlechten Beispiel ist die Schriftgröße fix in Pixel angegeben. Das verhindert in vielen Fällen eine saubere Skalierung beim Vergrößern. Das gute Beispiel nutzt eine relative Einheit (rem), die besser auf Änderungen durch den Browser oder die Nutzer-Einstellungen reagiert.
Falscher Code
<div style="width:400px; overflow:hidden; white-space:nowrap;">
Sehr langer Text, der nicht umbrechen kann und beim Vergrößern außerhalb des Bereichs läuft.
</div>Korrekter Code
<div style="max-width:100%; word-wrap:break-word;">
Sehr langer Text, der beim Vergrößern umbricht und gut lesbar bleibt.
</div>Das schlechte Beispiel schneidet Text ab, wenn dieser beim Vergrößern über den Bereich hinausläuft. Im guten Beispiel sorgt `max-width:100%` und `word-wrap:break-word` dafür, dass der Text immer umbricht und sichtbar bleibt.
Falscher Code
<button style="font-size:14px;">Absenden</button>Korrekter Code
<button style="font-size:1rem;">Absenden</button>Auch Bedienelemente wie Buttons sollten Schriftgrößen in relativen Einheiten angeben, damit sie zusammen mit restlichem Text skalieren.
Wie löse ich Verstöße gegen das Success Criterium 1.4.4 - Resize text?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.