Standards · WCAG 2.2

SC 1.4.5 Stufe AA WCAG 2.0

Texte in Bildern

Text sollte als echter Text implementiert werden, nicht als gerasterte Grafik – es sei denn, das Bild ist wesentlich (ein Logo, ein Screenshot einer besprochenen Benutzeroberfläche) oder vollständig anpassbar.

Was verlangt wird

Wenn dieselbe visuelle Darstellung mit echtem Text und CSS erreicht werden kann, sollte echter Text verwendet werden. Texte in Bildern lassen sich nicht sauber zoomen, können nicht markiert oder vom Browser übersetzt werden, können nicht per Benutzer-CSS umgestaltet werden und werden bei starker Vergrößerung pixelig. Ausnahmen: Logos, wesentliche Grafiken (ein Screenshot, der zeigt, wie eine Benutzeroberfläche aussieht) sowie Bilder von Text, den die Nutzerin oder der Nutzer anpassen kann.

Wie das Kriterium erfüllt wird

  • Überschriften, Banner und Werbetext als HTML-Text mit Web-Fonts rendern, nicht als exportierte PNG-Dateien.
  • Bei Marketing-Badges („Neu“, „Sale“, „30 % Rabatt“) ein per CSS gestaltetes <span>-Element statt eines Sprite-Bilds verwenden.
  • Wenn ein Entwurf ein Hero-Bild mit eingebettetem Text liefert, den Text als separate Ebene anfordern und mit CSS über das Bild legen.
  • Für serverseitig erzeugte Zitat-Karten im Social-Media-Stil SVG mit <text>-Elementen einsetzen, wenn möglich – SVG-Text skaliert sauber und ist markierbar.
  • @font-face verwenden, um benutzerdefinierte Display-Schriften zu laden, anstatt dekorative Schrift zu rastern.

Häufige Fehler

  • Werbebanner, bei denen der gesamte Text („Nur für kurze Zeit! Jetzt einkaufen!“) als JPEG gerendert wird und bei 200 % Zoom verschwommen wirkt.
  • Preistabellen, bei denen „99 €/Monat“ Teil eines Kartenbilds statt echten HTML-Texts ist.
  • Abschnittstrenner mit stilisiertem Text („Unsere Leistungen“), die als PNG statt als gestaltetes <h2> ausgeliefert werden.
  • Calls-to-Action, die vollständig bildbasiert sind und deren Alternativtext den visuellen Inhalt lediglich wiederholt.
  • E-Mail-ähnliche Screenshots auf Marketing-Seiten, bei denen der Werbetext auch als echter Text darstellbar wäre.

Warum es wichtig ist

Texte in Bildern sind zugleich ein Übersetzungs- und SEO-Versagen: Google kann sie nicht indexieren, Chrome kann sie nicht übersetzen, und Personen, die eine Bildschirmvergrößerung nutzen, sehen sie pixelig. Die Behebung ist in der Regel trivial – den Export durch HTML ersetzen. Die Hürde liegt im Arbeitsprozess: Designerinnen und Designer liefern JPEGs, weil diese in Figma schneller zu erstellen sind als eine präzise Spezifikation.