Prüfpunkt 1.4.5Stufe AABilder und Grafiken
Warum ist echter Text auf Websites besser als Text im Bild?
Echter Text ist besser als Text im Bild, weil er alles kann, was ein Bild nicht kann: Vorleseprogramme lesen ihn vor, Besucher vergrößern ihn verlustfrei, Google durchsucht ihn, und Übersetzungsfunktionen übertragen ihn in andere Sprachen. Ein als Foto eingebundenes Angebot mit Öffnungszeiten ist für all diese Wege unsichtbar.
Text im Bild ist stummer Text
Der Klassiker: Die Grafikabteilung gestaltet ein schönes Aktionsbanner — Preis, Zeitraum und Bedingungen stehen als Schrift im Bild. Für sehende Besucher sieht das gut aus. Für alle anderen Systeme ist es eine Sackgasse: Das Vorleseprogramm eines blinden Besuchers kann die Bildpunkte nicht in Sprache verwandeln, beim Vergrößern werden die Buchstaben pixelig und unscharf, Google findet weder Preis noch Aktion, und die automatische Übersetzung ins Englische scheitert komplett. Dazu kommt der Pflegeaufwand: Jede Preisänderung braucht einen Grafiker. Die Regel erlaubt Ausnahmen, wo die grafische Form wesentlich ist — Ihr Logo darf selbstverständlich ein Bild bleiben.
So geht unsere Prüfung mit Bildern von Text um
Ob in einem Bild Text steckt, erkennt man erst, wenn man das Bild inhaltlich betrachtet — eine Maschine müsste dafür jedes Bild wie ein Mensch lesen und dann beurteilen, ob die grafische Form wesentlich ist oder der Text genauso gut als echter Text stehen könnte. Diese Abwägung ist eine menschliche Aufgabe. Unser Messkern behauptet hier nichts, was er nicht messen kann: Das Kriterium erscheint im Bericht als menschlicher Prüfpunkt. Beim Gold-Standard sieht ein Prüfer die Bilder Ihrer Seiten durch und markiert Banner, Buttons und Grafiken, deren Textinhalt als echter Text umgesetzt gehört — samt Empfehlung, wie die Gestaltung dabei erhalten bleibt.
Beispiele
Überschrift als Grafik
<img src="ueberschrift-angebote.png" alt="Unsere Angebote"><h2 class="marke">Unsere Angebote</h2>
<style>.marke { font-family: "Hausschrift", sans-serif; }</style>Echter Text lässt sich vergrößern, umfärben, übersetzen und durchsuchen. Die Hausschrift kommt als Webschrift.
So gehen Sie es an
- Suchen Sie auf Ihrer Website nach Bannern und Kacheln, in denen Preise, Termine oder Telefonnummern als Bild stehen — genau diese Inhalte zuerst umstellen.
- Bitten Sie Ihre Agentur, Gestaltung und Text zu trennen: Hintergrundbild als Bild, Text als echter Text darüber.
- Markieren Sie Text auf Ihrer Seite mit der Maus — was sich nicht markieren lässt, ist ein Bild und gehört auf die Prüfliste.
- Belassen Sie Ihr Logo als Bild mit gutem Alternativtext — dafür gilt die Ausnahme der grafischen Form.
- Denken Sie an den Nebeneffekt: Jeder umgestellte Text wird für Google sichtbar und stärkt Ihre Auffindbarkeit.
Weiter im Prüfbereich Barrierefreiheit
- Wie bleibt eine Website am Handy ohne seitliches Scrollen lesbar?Inhalte müssen bei 320 Pixel Breite in eine Spalte umbrechen. Unser Messkern rendert die Seite in mehreren Breiten und misst den Überlauf.
- Welchen Kontrast brauchen Schaltflächen und Eingabefelder auf Websites?Bedienelemente und aussagekräftige Grafiken brauchen mindestens 3:1 Kontrast zur Umgebung — sonst findet ein sehschwacher Besucher das Eingabefeld nicht.
- Warum müssen sich Zeilenabstand und Zeichenabstand auf Websites anpassen lassen?Menschen mit Leseschwäche weiten Textabstände per Hilfsmittel. Die Website muss das verkraften, ohne Text abzuschneiden oder Abstände zu blockieren.
- Wie müssen Tooltips und Einblendungen auf Websites bedienbar sein?Inhalte, die bei Mauskontakt oder Tastaturfokus erscheinen, müssen wegschaltbar, berührbar und beständig sein — sonst verdecken sie, was man lesen will.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: bady qb, CC0
.jpg){kind=link}