Prüfkriterium 9.1.4.5: Schriftgrafiken

Stellen Sie sich eine Webseite vor, deren Inhalt Sie problemlos an Ihre Bedürfnisse anpassen: Schriftgröße vergrößern, Farben ändern, Texte mit einem Screenreader vorlesen lassen. All das funktioniert reibungslos, weil die Inhalte als echter Text eingebunden sind.

Wenn Texte hingegen als Bild dargestellt werden, gehen diese Vorteile verloren. Die Inhalte werden unscharf beim Zoomen, lassen sich farblich nicht anpassen und bleiben für Screenreader oft unzugänglich.

Daher gilt der Grundsatz: Texte im Web sollen immer als echter Text eingebunden werden. So bleiben sie flexibel, barrierefrei und für alle nutzbar.

Wichtige Hinweise zur Umsetzung

Damit Inhalte flexibel und anpassbar bleiben sowie für alle Nutzenden zugänglich sind, finden Sie hier einige praxisnahe Hinweise zur Umsetzung des Prüfkriteriums 9.1.4.5.

Das Prüfkriterium fordert: „Texte dürfen nicht als Grafik dargestellt werden.” Ausnahmen sind nur in wenigen Fällen zulässig. Beispielsweise bei Logos, die als Firmenkennzeichen genutzt werden, oder bei Fotos, bei der die Schrift im Kontext zu den übrigen Bildmotiven steht.

Ein hilfreiches Werkzeug zur Prüfung ist das Firefox-Add-on "Web Developer Toolbar". Über den Reiter „Images“ kann dort die Funktion „Hide Images“ aktiviert werden. Dadurch werden alle grafischen Elemente einer Seite ausgeblendet. So lässt sich schnell erkennen, ob Inhalte wie Überschriften oder Menüpunkte verschwinden, weil sie fälschlicherweise als Schriftgrafiken eingebunden sind.

Tipp: Öffnen Sie die zu prüfende Inhaltsseite am besten zweimal – einmal normal und einmal mit ausgeblendeten Bildern. So lässt sich ein direkter Abgleich vornehmen.

Schriftgrafiken dürfen insbesondere nicht für zentrale Bereiche einer Website eingesetzt werden, wie Navigation, Überschriften oder Schaltflächen. Auch Informationsseiten dürfen nicht vollständig durch Bilder ersetzt werden, etwa indem der gesamte Inhaltsbereich mit einem Screenshot eines Word-Dokuments ausgefüllt ist. Stellen Sie Inhalte immer als echten Text bereit, damit sie flexibel, anpassbar und barrierefrei nutzbar sind.

Beispiel: Stellenangebot

• Nicht barrierefrei: Ein komplettes DIN-A4-Stellenangebot wird als PNG eingebunden. Solche Fälle tauchen bei Webseiten-Tests immer wieder auf. Der Alternativtext lautet dann oft nur „Stellenangebot.pdf“ oder ist leer. Interessierte, die Screenreader nutzen, können die Informationen so nicht erfassen.
• Barrierefrei: Das Stellenangebot wird als normaler HTML-Text veröffentlicht. Gestaltung und Corporate Design werden über CSS umgesetzt. Optional kann eine Broschüre zusätzlich als PDF zum Download bereitgestellt werden.

Beispiel: Bedienelement

• Nicht barrierefrei: Ein Button mit der Aufschrift „Senden“ wird als Bildgrafik eingebunden. Auch wenn ein Alternativtext vorhanden ist, bleibt der Button in Größe und Farbe unflexibel.
• Barrierefrei: Der Button wird als HTML-Element umgesetzt und per CSS gestaltet. Schriftgröße und Farben sind anpassbar.

Beispiel: Überschrift

• Nicht barrierefrei: Die Hauptüberschrift der Seite wird als dekorative Schriftgrafik eingebunden. Somit lässt sich die Schrift nicht vergrößern, Sie wirkt bei Zoom unscharf.
• Barrierefrei: Die Überschrift wird als echter HTML-Text eingesetzt und über CSS im gewünschten Design dargestellt.

Abgrenzung zu anderen Prüfschritten

9.1.1.1a / 9.1.1.1b (Alternativtexte): Schriftgrafiken müssen einen Alternativtext haben. Dieser Schritt allein macht sie aber nicht barrierefrei, da Größe und Farbe weiterhin nicht anpassbar sind.

9.1.4.3 (Kontraste): Schriftgrafiken müssen ebenfalls kontrastreich sein. Das ändert aber nichts an der grundsätzlichen Forderung, auf Schriftgrafiken zu verzichten.

Fazit: Setzen Sie konsequent auf echten Text

Schriftgrafiken sind ein Überbleibsel aus Zeiten, in denen die Gestaltung von Auftritten im Web technisch begrenzt und nicht von vornherein barrierefrei möglich war. Heute gibt es mit Webfonts und CSS alle Möglichkeiten, Corporate-Design-Vorgaben zugänglich zu gestalten.

Besonders kritisch ist der Einsatz bei Stellenangeboten, die als reine Bilddatei eingebunden werden. Diese Inhalte sind für viele Bewerberinnen und Bewerber unzugänglich und stellen damit nicht nur ein Barrierefreiheits-, sondern auch ein Teilhabeproblem dar.

Nutzen Sie echten Text – Logos ausgenommen. Damit stellen Sie sicher, dass Inhalte flexibel, anpassbar und für alle zugänglich bleiben.

Autorin: Stiftung Pfennigparade