1.4.5 Bilder eines Textes

Wörter auf der Seite sollen echter Text sein und kein Bild von Text, es sei denn, man kann das Bild anpassen oder die genaue Darstellung ist wesentlich, wie bei einem Logo.

/ Was es verlangt

Ein Bild eines Textes ist Text, der für eine bestimmte Optik in Pixel verwandelt wurde: eine Überschrift als PNG in der Hausschrift, ein Banner mit dem Angebot im JPEG, eine Schaltfläche aus einem Bild ihrer Beschriftung. Echter Text lässt sich ohne Unschärfe vergrößern, umfärben, mit mehr Zeilenabstand versehen oder in einer Schrift setzen, die jemand leichter liest, über Browsereinstellungen, ein eigenes Stylesheet oder eine Leseerweiterung. Text in einem Bild nicht. Das Kriterium schützt Menschen mit Sehbehinderung, Menschen mit Problemen bei der Blickführung, die andere Abstände oder eine andere Ausrichtung brauchen, und Menschen mit kognitiven Beeinträchtigungen, die das Lesen erschweren.

Wenn die verwendete Technik die visuelle Darstellung erreichen kann, und HTML mit CSS kann das fast immer, muss Text statt eines Bildes davon verwendet werden. Zwei Ausnahmen bleiben: Das Bild eines Textes lässt sich visuell an die Anforderungen der Person anpassen, also in Schrift, Größe, Farbe und Hintergrund, oder eine bestimmte Darstellung des Textes ist für die Information wesentlich. Logos mit Schrift gelten als wesentlich. Text in einem Bild mit bedeutendem anderem visuellem Inhalt, etwa einem Diagramm, einem Screenshot oder einer Skizze, ist kein Bild eines Textes. Ein Bild ist auch zulässig, wenn dieselben Wörter daneben als echter Text stehen, eine Erleichterung, die das AAA-Kriterium 1.4.9 streicht.

/ Woran Seiten scheitern

Abschnittsüberschriften sind PNG-Dateien in der Hausschrift, und die Wörter stehen nur im alt-Attribut.
Das Banner der Startseite ist ein einziges JPEG, in das Überschrift, Angebot und Schaltflächentext eingezeichnet sind.
Eine Navigationsleiste oder eine Reihe von Schaltflächen verwendet Bilder ihrer Beschriftungen statt per CSS gestaltetem Text.
Ein Restaurant oder Veranstalter veröffentlicht Speisekarte oder Programm nur als exportiertes Bild, ohne Textfassung auf der Seite.
Ein Kundenzitat wird als Bild gezeigt, um eine verschnörkelte Schreibschrift zu behalten, obwohl eine Webschrift dieselbe Wirkung hätte.

/ So prüfen Sie es selbst

Zoomen Sie die Seite auf 200 Prozent oder mehr und suchen Sie Wörter, die unscharf oder pixelig werden. Text, der pixelt, ist ein Bild.
Versuchen Sie, die Wörter mit der Maus zu markieren, oder drücken Sie Strg+A. Wörter, die sich nicht markieren lassen, sind kein Text.
Untersuchen Sie in den Entwicklerwerkzeugen jeden Verdachtsfall: ob es ein img, ein CSS-background-image, ein svg oder ein canvas ist und ob die Wörter als Text im DOM stehen.
Schalten Sie Bilder ab, zum Beispiel mit der Browsererweiterung Web Developer, und sehen Sie, welche Wörter von der Seite verschwinden.
Entscheiden Sie bei jedem gefundenen Bild eines Textes, ob es ein Logo, ein Schriftmuster oder ein anderer Fall ist, in dem die genaue Darstellung wesentlich ist, oder ob CSS es hätte leisten können.

/ So beheben Sie es

Bauen Sie Überschriften und Banner als HTML-Text mit CSS neu und laden Sie die Hausschrift über @font-face.
Legen Sie Text über einem Foto als HTML über ein img oder ein CSS-background-image, statt ihn in die Bilddatei einzuzeichnen.
Ersetzen Sie Bild-Schaltflächen und Bild-Links durch button- und a-Elemente mit Text, und zeichnen Sie Hintergründe, Rahmen und Schatten mit CSS.
Lässt sich ein Bild eines Textes nicht vermeiden, etwa bei einem hochgeladenen Plakat, veröffentlichen Sie dieselben Wörter daneben als Text auf der Seite.
Behalten Sie das Logo als Bild mit dem Namen der Organisation als alt-Text. Logos sind von diesem Kriterium ausgenommen, nicht aber von 1.1.1.

/ Was unser Scanner prüft

Keine automatische Prüfung in unserem Scan deckt 1.4.5 ab. Ein Bild mit Wörtern von einem Foto zu unterscheiden, verlangt, dass jemand hinsieht, und HTML_CodeSniffer gibt zu diesem Kriterium nur einen allgemeinen Hinweis aus, den der Scan verwirft. Eine manuelle Prüfung sieht jedes Bild, Hintergrundbild und canvas-Element auf Text durch und entscheidet, ob ein Logo oder ein Schriftmuster unter die Ausnahmen fällt.

/ Wer es verletzt, nach unseren eigenen Messungen

Der wöchentliche Index hat für dieses Kriterium keine Zahlen, weil keine Prüfung des Website-Scans es testen kann. Ein Mensch beurteilt es, und genau dafür gibt es ein manuelles Audit.

Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.

/ Fragen zu diesem Kriterium

Darf ein Logo ein Bild eines Textes sein?

Ja. WCAG behandelt Schriftzüge in Logos, also Text, der Teil eines Logos oder Markennamens ist, als wesentlich, deshalb sind sie von 1.4.5 ausgenommen. Das Logobild braucht nach 1.1.1 trotzdem eine Textalternative, meist den Namen der Organisation.

Ist Text in einem Diagramm, Screenshot oder einer Infografik ein Bild eines Textes?

Nicht, wenn das Bild bedeutenden anderen visuellen Inhalt enthält. Die Definition des W3C nimmt Diagramme, Screenshots und Skizzen aus, die Informationen durch mehr als Text vermitteln. Eine Infografik, die überwiegend aus Sätzen auf farbigem Grund besteht, ist näher an einem Bild eines Textes und wird besser in HTML gebaut. In jedem Fall muss die Information als Text verfügbar sein, über das alt-Attribut, eine Bildunterschrift oder eine Datentabelle.

Auf welcher Stufe steht 1.4.5, und worin unterscheidet es sich von 1.4.9?

Bilder eines Textes gehört zu Stufe AA, eine Website mit dem Ziel AA muss es also erfüllen. Es erlaubt ein Bild eines Textes, wenn die Darstellung wesentlich ist, wenn man es anpassen kann oder wenn derselbe Text auch als Text gezeigt wird. 1.4.9 auf Stufe AAA ist strenger: Bilder eines Textes sind nur zur reinen Dekoration erlaubt oder wo die Darstellung wesentlich ist.

Eigene Seite messen Alle gemessenen Barrieren