Gehirngerecht Digital

Die WCAG-Kriterien

WCAG 1.4.5: Bilder von Text

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

  • Komplexität:Einfach
  • Dauer:Kann dauern

Wichtig für Rolle:

Design

Worum gehts?

Wichtige Informationen dürfen nicht als Bilder von Texten dargestellt werden, sondern müssen als echter Text hinterlegt sein.

Einige Menschen müssen Texte visuell verändern können, um sie gut lesen zu können. Pixelgrafiken reagieren nicht auf solche Anpassungen und werden außerdem auch nicht von Screenreadern erkannt.

Im Bild steht: Hier im Bild sollte eigentlich kein Text stehen, sorry! Daneben ist eine grüne Figur, die fragend schaut und dazu sagt sie: Typisch!

Umsetzung

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

  • Im Bild steht: Hier im Bild sollte eigentlich kein Text stehen, sorry! Daneben ist eine grüne Figur, die fragend schaut und dazu sagt sie: Typisch!

    Texte als Pixelgrafik vermeiden

    Texte sollten als echter HTML-Text hinterlegt sein, damit Menschen, die darauf angewiesen sind, Schriftgröße, Farbe oder andere Eigenschaften anpassen können.

    Außerdem sollten Bilder keine Texte enthalten, die wichtig für das Verständnis sind, wie Promotionen, Werbecodes oder sonstige Texte.

    Anmerkungen

    • Illustration von einer Website mit einem Bild mit Text, das Bild hat jedoch eine Textalternative in der Nähe des Bildes, die denselben Inhalt wiedergibt.

      Ausnahme: Es gibt eine Textalternative in der Nähe

      Ein Bild darf Text mit wichtigen Informationen beinhalten, wenn der Text auch in HTML-Form in der Nähe des Bildes zu finden ist.

      Auf unserer Webseite haben wir zum Beispiel oft Texte in unseren Blogbildern. Dieser Text wird aber (teilweise auch noch ausführlicher) im Blogbeitrag wiederholt. Damit haben wir eine zugängliche Alternative geschaffen. 

    • Illustration eines SVGs, das Text im -Tag eingebunden hat. Daneben ist eine grüne Figur, die beeindruckt schaut und dazu sagt sie: cool!

      Ausnahme: Die Texte sind als SVG-Text eingebunden

      Wenn Text im <text>-Tag eines SVG eingebunden ist, ist es möglich diesen Text auch in Größe, Form und Farbe an die eigenen Bedürfnisse anzupassen. 

    • Ein Ausschnitt der WCAG Kriterien Cards, die man auf unserem Blog findet und für die wir Bilder mit Text zu Dokumentations-Zwecken nutzen.

      Ausnahme: Bild dient zur Dokumentation

      Wenn ein Bild zur Dokumentation dient, zum Beispiel, weil es ein Screenshot von einer Software ist oder weil in einer Illustration gewisse Schritte zum Zusammenbauen von etwas gezeigt wird, darf dieses Bild auch Text enthalten. 

    • Ein Zertifikat für digitale Barrierefreiheit. Hier ist Text im Bild zwingend nötig, daher ist es für diesen Zweck okay.

      Ausnahme: Text ist essenziell für das Bild

      Wenn Text essenziell für das Wesen des Bildes ist, darf es auch Text enthalten.

      Dazu zählen zum Beispiel Urkunden, Buch-Cover, Siegel und so weiter. Ohne Text würden diese Bilder nicht mehr funktionieren bzw. keinen Sinn mehr ergeben.  

                DAs Accessbility-Center

                Teste selbstständig auf digitale Barrierefreiheit! 

                Mit unserem manuellen Test-Tool prüfst du deine Website selbstständig, schnell und effizient auf digitale Barrierefreiheit!

                • Alle Prüfschritte leicht erklärt
                • Teile und exportiere Prüfberichte
                • Teste direkt auf der Live-Webseite!
                Zum Accessibility-Center