Text vergrößern ohne Verlust

Warum Textvergrößerung wichtig ist

Stell dir vor, du hast eine leichte Sehbehinderung, nichts, wofür du einen Screenreader bräuchtest, aber die Standard-Schriftgröße einer Website ist dir schlicht zu klein. Was machst du? Du drückst Strg  +  + (oder am Mac Cmd  +  + ) und vergrößerst die Darstellung, bis du den Text bequem lesen kannst.

Genau diese alltägliche Handlung schützt das Erfolgskriterium 1.4.4 Text vergrößern. Ein Erfolgskriterium ist eine einzeln prüfbare Anforderung der Web Content Accessibility Guidelines (WCAG). 1.4.4 sorgt dafür, dass das Vergrößern auch wirklich funktioniert: dass nicht plötzlich Wörter ineinanderlaufen, Schaltflächen ihre Beschriftung verlieren oder Text hinter anderen Elementen verschwindet. Davon profitieren nicht nur Menschen mit Sehbehinderung, sondern auch alle, die auf einem weit entfernten Bildschirm lesen, müde Augen haben oder einfach eine größere Schrift bevorzugen.

Was 1.4.4 genau verlangt

Der Wortlaut des Kriteriums ist knapp: Mit Ausnahme von Untertiteln und Schriftgrafiken muss sich Text ohne assistive Technologie bis zu 200 Prozent vergrößern lassen, ohne dass Inhalt oder Funktion verloren gehen. Drei Worte daraus lohnen einen genaueren Blick.

200 Prozent meint die doppelte Breite und Höhe der Schrift, also etwa eine Verdopplung der wahrgenommenen Textgröße. Bietet die Vergrößerung Zwischenstufen an (etwa 110 %, 125 %, 150 %), darf auch auf keiner dieser Stufen etwas kaputtgehen.

Ohne assistive Technologie ist der entscheidende Zusatz: Gemeint ist die ganz normale Vergrößerung, die jeder Browser eingebaut hat, nicht eine separate Bildschirmlupe. Eine assistive Technologie ist Spezialsoftware für Menschen mit Behinderung, etwa ein Screenreader oder ein Bildschirmvergrößerer. 1.4.4 verlangt, dass es auch ohne solche Hilfsmittel geht. Die eigentliche Vergrößerung ist dabei Aufgabe des Browsers, deine Aufgabe ist nur, ihm nicht im Weg zu stehen.

Ohne Verlust von Inhalt oder Funktion heißt: Nach dem Vergrößern muss noch alles da und bedienbar sein. Kein abgeschnittener Satz, kein Button, dessen Beschriftung aus dem Rahmen rutscht, keine zwei Texte, die sich überlappen.

Die zwei Ausnahmen: Untertitel und Schriftgrafiken

1.4.4 nimmt zwei Dinge ausdrücklich aus: Untertitel(also der eingeblendete Text in Videos) und Schriftgrafiken, also Text, der als Bild gespeichert ist, statt als echter Text. Für beide gilt die 200-Prozent-Pflicht nicht im gleichen Sinn.

Der Grund für die zweite Ausnahme ist zugleich ein guter Rat: Text, der als Bild gespeichert ist, verpixelt beim Vergrößern und wird unscharf. Außerdem lässt sich an einem Bild weder die Schriftart noch der Farbkontrast nachträglich anpassen, beides Dinge, die manche Menschen brauchen. Die WCAG zieht daraus die Konsequenz: Verwende echten Text statt einer Schriftgrafik, wann immer es möglich ist. Dann stellt sich die Ausnahme gar nicht erst.

Textvergrößerung technisch ermöglichen

Die gute Nachricht: Moderne Browser zoomen von sich aus mit. Deine Aufgabe ist vor allem, ihnen das nicht zu verbauen. Drei Grundregeln tragen den größten Teil:

• Relative Schriftgrößen statt fester Pixel-Korsetts. Einheiten wie rem , em oder Prozent skalieren sauber mit. Die WCAG-Techniken C14 (em) und C12 (Prozent) beschreiben genau das.
• Container, die mit dem Text mitwachsen. Wenn die Schrift größer wird, muss die Box höher werden dürfen: keine fest gedeckelte Höhe, aus der der Text herausläuft. Technik C28 nutzt dafür em auch für die Container-Größe.
• Keine gesperrte Zoom-Funktion. Das Viewport-Meta-Tag im Dokumentkopf darf das Vergrößern nicht verbieten.

 /* Basis am Wurzelelement; alles andere rechnet relativ dazu. */ 
:root { font-size: 100% 
; } /* respektiert die Browser-Einstellung */.fliesstext  { font-size: 1.125rem 
; } /* ~18px, skaliert mit */.hinweis     { font-size: 0.875em 
; } /* relativ zum Elternelement */ 
 /* Box wächst mit dem Text, keine feste Höhe, die abschneidet */.karte { min-height: 3em 
; padding: 1rem 
; }

Für Fälle, in denen der Browser keinen vollwertigen Zoom anbietet, sieht die WCAG zusätzliche Wege vor: eine eigene Bedienung auf der Seite, mit der sich der Text schrittweise bis 200 % vergrößern lässt (Technik G178), oder das Sicherstellen, dass bei festen Container-Breiten trotzdem nichts verloren geht (Technik G179). Für die allermeisten Websites reicht es aber, den eingebauten Browser-Zoom nicht zu behindern (Technik G142).

 <!-- gut: erlaubt das Vergrößern --> 
<meta name= "viewport" 
content= "width=device-width, initial-scale=1" 
> <!-- vermeiden: user-scalable=no und maximum-scale=1 sperren den Zoom --> 

Die häufigsten Stolperfallen

Verstöße gegen 1.4.4 entstehen selten mit Absicht. Meist ist es ein einzelnes Element, das beim Vergrößern nicht mitmacht. Die WCAG benennt drei typische Fehlerbilder:

• Abgeschnittener oder überdeckter Text. Bei 200 % läuft die Schrift aus einer fest gedeckelten Box, wird vom Nachbarelement überlappt oder einfach abgeschnitten. Das ist der klassische Fehler (in der WCAG als Failure F69 dokumentiert).
• Formularfelder, die nicht mitwachsen. Eingabefelder und Buttons, deren Text sich nicht mit vergrößert, während der restliche Text größer wird (Failure F80).
• Schriftgrößen in Viewport-Einheiten. Größen allein in vw oder vh hängen an der Fenstergröße statt an der Zoom-Stufe, der Text vergrößert sich dann beim Zoomen nicht richtig (Failure F94).

1.4.4, Reflow und Textabstände

Drei WCAG-Kriterien drehen sich um Größe und Abstand von Text und werden gern verwechselt. Die Abgrenzung hilft, beim Testen das Richtige zu prüfen.

1.4.4 Text vergrößern betrifft nur den Text und endet bei 200 %. Das verwandte 1.4.10 Reflow geht weiter: Es verlangt, dass die gesamte Darstellung bei 400 % Zoom beziehungsweise 320 CSS-Pixel ohne zweidimensionales Scrollen auskommt. Und 1.4.12 Textabstände betrifft nicht die Größe, sondern den Abstand: Nutzer:innen müssen Zeilen-, Wort- und Buchstabenabstände erhöhen können, ohne dass Inhalt verloren geht.

In der Praxis ziehen die drei oft an einem Strang: Wer relative Einheiten verwendet und Container mitwachsen lässt, erfüllt meist alle drei zugleich. Trotzdem lohnt es sich, sie getrennt zu testen, denn eine Seite kann 1.4.4 bei 200 % bestehen und trotzdem bei 400 % an Reflow scheitern.

Praxis-Checkliste

1. Lässt sich die Seite im Browser auf 200 % vergrößern?
2. Bleibt dabei jeder Text vollständig sichtbar, nichts abgeschnitten oder überdeckt?
3. Wachsen auch Formularfelder und Schaltflächen mit dem Text mit?
4. Sind Schriftgrößen in rem , em oder Prozent gesetzt statt allein in vw / vh ?
5. Haben Container keine feste Höhe, aus der vergrößerter Text herausläuft?
6. Erlaubt das Viewport-Meta-Tag das Zoomen (kein user-scalable=no )?
7. Wurde mit echtem Browser-Zoom getestet, nicht mit einer separaten Bildschirmlupe?
8. Ist echter Text statt einer Schriftgrafik im Einsatz, wo immer möglich?

Mythen-Prüfung