1.4.5: Bilder von Text

1.4.5: Bilder von Text (Images of Text) auf WCAG-Stufe AA stellt sicher, dass Textinhalte als echter, maschinenlesbarer Text dargestellt werden – nicht als Bild, damit sie vergrößerbar, vorlesbar und anpassbar bleiben.

Wenn der gleiche visuelle Effekt auch mit Text erreicht werden kann, verwende echten Text statt ein Bild mit Text

Ausnahme:

• Wenn das Bild von Text wesentlich ist (z. B. bei Logos oder stilistisch nicht anders möglich).

• Bilder mit Text lassen sich nicht gut zoomen
• Screenreader können sie nicht auslesen
• Nutzer können sie nicht mit CSS anpassen (z. B. Dark Mode, Schriftgröße)
• Schlechte Darstellung bei kleinen Bildschirmen, Retina-Displays
• Ausreichende Techniken mit technischer Umsetzung
• G140 – Nutze CSS-stilisierten echten Text statt Bildern

Falsch:

<img src="slogan.png" alt="Der beste Preis">

Bild mit eingebettetem Text – nicht barrierefrei → nicht vergrößerbar, nicht vorlesbar, nicht responsiv

Richtig:

<h2 class="slogan">Der beste Preis</h2>

.slogan {
  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

Gleiche Optik, aber maschinell lesbar und anpassbar

Ausnahme: Wenn Bild von Text wesentlich ist

Erlaubt:

• Logos
• Kalligraphie
• Stilistisch wichtiger Teil eines Kunstwerks (z. B. handschriftlicher Brief in Bild)

<img src="logo.svg" alt="Firmenlogo: Schneller Service">

G192 - Verwende SVGs mit echtem Text als Alternative zu Pixelbildern
G182 - Stelle zusätzlich eine Textalternative bereit (auch bei dekorativen Textbildern)
G145 - Stelle sicher, dass bei großen Bildschirmen oder Zoom Text nicht unscharf wird
G162 - Biete alternative Ansicht mit echtem Text (z. B. Umschalter Bild ↔ Text)
G148 - Nutze CSS-Effekte statt Grafiken (Schatten, Verläufe, Icons etc.)

• Bild mit eingebettetem Text ohne gleichwertige Textalternative
• Kein alt-Attribut am Bild mit Text
• input type="image" mit Text im Bild, aber ohne alt-Text
• Stilistische Texte (z. B. Zitate) nur als Bild dargestellt, obwohl Text möglich wäre