Blog

Was prüft ein WCAG-Test bei Bildern und Grafiken?

Herausgegeben von Decareto

4 Minuten lesen

Oktober 27, 2026

Ein WCAG-Test prüft bei Bildern und Grafiken vor allem, ob visuelle Inhalte auch für Menschen zugänglich sind, die sie nicht sehen können oder die auf unterstützende Technologien wie Screenreader angewiesen sind. Im Mittelpunkt stehen Alternativtexte, die Behandlung dekorativer Elemente, ausreichende Farbkontraste sowie die verständliche Aufbereitung komplexer visueller Inhalte. Die folgenden Abschnitte beantworten die wichtigsten Einzelfragen rund um die Barrierefreiheitsprüfung von Bildern.

Welche WCAG-Kriterien gelten speziell für Bilder?

Für Bilder und Grafiken sind im Rahmen der Web Content Accessibility Guidelines (WCAG) vor allem die Erfolgskriterien aus dem Bereich Wahrnehmbarkeit relevant. Das zentrale Kriterium ist 1.1.1 „Nicht-Text-Inhalt“ (Level A), das für alle nicht-textlichen Inhalte eine Textalternative fordert. Ergänzend greifen Kriterien zu Farbkontrasten (1.4.3, 1.4.11) sowie zur Skalierbarkeit von Text in Grafiken.

Die WCAG unterscheiden dabei nach der Funktion eines Bildes: Informative Bilder, funktionale Bilder (etwa Schaltflächen mit Icon), dekorative Bilder und komplexe Grafiken wie Diagramme werden unterschiedlich behandelt. Ein Barrierefreiheit-Test-Tool prüft automatisiert, ob die im HTML-Code hinterlegten Alternativtexte und ARIA-Attribute den jeweiligen Anforderungen entsprechen. Kriterium 1.4.5 regelt zusätzlich den Einsatz von Schriftgrafiken und schränkt ihn ein, sofern der gleiche visuelle Eindruck auch mit echtem Text erreichbar wäre.

Für eine strukturierte BITV-Prüfung, die auf den WCAG basiert, gelten dieselben Anforderungen an Bildinhalte, da die BITV 2.0 die WCAG 2.1 auf Level AA als verbindlichen Standard übernimmt.

Wie prüft ein WCAG-Test Alternativtexte bei Bildern?

Ein WCAG-Test prüft Alternativtexte, indem er analysiert, ob jedes <img>-Element ein alt-Attribut besitzt, ob dieses Attribut einen sinnvollen Inhalt hat und ob es der Funktion des Bildes im jeweiligen Kontext entspricht. Fehlt das Attribut vollständig, wird dies als kritischer Fehler eingestuft.

Automatisierte Tools können technisch zuverlässig erkennen, ob ein alt-Attribut vorhanden ist oder fehlt. Sie können jedoch nicht beurteilen, ob der Inhalt des Alternativtexts tatsächlich sinnvoll und treffend formuliert ist. Ein Alternativtext wie „Bild1234.jpg“ ist technisch vorhanden, inhaltlich aber wertlos für Screenreader-Nutzerinnen und -Nutzer.

Was macht einen guten Alternativtext aus?

Ein guter Alternativtext beschreibt den wesentlichen Inhalt oder die Funktion eines Bildes präzise und knapp. Er sollte das Bild nicht mit „Bild von …“ oder „Grafik zeigt …“ einleiten, da Screenreader die Bildrolle bereits ankündigen. Für ein Produktfoto eines roten Lederstuhls wäre „Roter Lederstuhl mit Armlehnen“ angemessen, nicht „Stuhl“ oder „Möbel“.

Wann ist ein leerer Alternativtext korrekt?

Für dekorative Bilder, die keinen inhaltlichen Mehrwert liefern, ist ein leerer Alternativtext (alt="") ausdrücklich korrekt und erwünscht. Damit signalisiert der Code dem Screenreader, das Element zu überspringen. Ein fehlendes alt-Attribut hingegen führt dazu, dass manche Screenreader den Dateinamen vorlesen, was die Nutzung erheblich erschwert.

Was gilt für dekorative Bilder und Hintergrundgrafiken?

Dekorative Bilder, die ausschließlich gestalterischen Zwecken dienen und keine Information transportieren, müssen laut WCAG-Kriterium 1.1.1 so ausgezeichnet werden, dass unterstützende Technologien sie ignorieren. Der korrekte Weg ist ein leeres alt-Attribut (alt=""). Hintergrundgrafiken, die per CSS eingebunden werden, sind für Screenreader grundsätzlich unsichtbar und erfordern daher keinen Alternativtext.

Ein häufiger Fehler besteht darin, dekorative Bilder ohne alt-Attribut einzubinden oder ihnen einen Alternativtext wie „Dekoration“ zu geben. Ersteres kann dazu führen, dass Screenreader den Dateinamen vorlesen; Letzteres erzeugt unnötigen Lärm für Nutzerinnen und Nutzer, die auf diese Technologien angewiesen sind.

Bei der Website-Barrierefreiheitsprüfung werden Bilder ohne alt-Attribut automatisch als Fehler markiert. Ob ein Bild tatsächlich dekorativ ist oder inhaltliche Relevanz hat, muss im Rahmen einer manuellen Prüfung beurteilt werden, da diese Entscheidung von Kontext und Redaktionsstrategie abhängt.

Wie werden Infografiken, Diagramme und komplexe Grafiken bewertet?

Komplexe Grafiken wie Infografiken, Diagramme oder Schaubilder erfordern nach WCAG-Kriterium 1.1.1 eine ausführlichere Textalternative, die den vollständigen Informationsgehalt vermittelt. Ein kurzer Alternativtext reicht hier nicht aus. Die WCAG empfehlen, entweder eine lange Beschreibung im umgebenden Text, eine verlinkte Seite mit der vollständigen Beschreibung oder eine strukturierte Datentabelle als Alternative anzubieten.

Automatisierte Tests können bei Diagrammen prüfen, ob überhaupt ein Alternativtext vorhanden ist und ob ARIA-Attribute wie aria-describedby korrekt eingesetzt werden. Sie können jedoch nicht beurteilen, ob die Beschreibung inhaltlich vollständig und korrekt ist. Das ist eine der zentralen Grenzen automatisierter Barrierefreiheitsprüfungen: Ein gutes Testergebnis bedeutet nicht, dass keine Barrieren vorliegen, sondern lediglich, dass keine technisch erkennbaren Fehler gefunden wurden.

Für Diagramme in Datenvisualisierungen empfiehlt es sich zusätzlich, die zugrunde liegenden Daten als Tabelle bereitzustellen. Das erfüllt nicht nur die Anforderungen an Barrierefreiheit, sondern verbessert auch die allgemeine Verständlichkeit des Inhalts.

Was prüft ein WCAG-Test bei Schriftgrafiken und Text in Bildern?

WCAG-Kriterium 1.4.5 (Level AA) legt fest, dass Text nicht als Grafik dargestellt werden darf, wenn derselbe visuelle Effekt auch mit echtem HTML-Text erreichbar ist. Ausnahmen gelten für Logos und Wortmarken sowie für Fälle, in denen die grafische Darstellung für das Verständnis wesentlich ist, etwa bei Schriftproben oder historischen Dokumenten.

Schriftgrafiken stellen ein besonderes Barrierefreiheitsproblem dar, weil Text in Bildern nicht skalierbar ist. Nutzerinnen und Nutzer, die die Browservergrößerung verwenden oder auf eine hohe Schriftgröße angewiesen sind, erhalten beim Heranzoomen einer Schriftgrafik ein unscharfes Bild statt lesbaren Text. Zudem ist der eingebettete Text für Screenreader nicht direkt zugänglich, sofern kein passender Alternativtext hinterlegt ist.

Automatisierte Tests können Bilder mit Text erkennen, sofern diese als <img>-Element eingebunden sind, und prüfen, ob ein Alternativtext vorhanden ist. Ob der Alternativtext den Textinhalt der Grafik vollständig wiedergibt, muss manuell kontrolliert werden. Außerdem kann ein automatisierter Test nicht in jedem Fall beurteilen, ob eine Schriftgrafik notwendig ist oder durch echten Text ersetzt werden könnte.

Welche Bildfehler führen zu rechtlichen Risiken nach BFSG?

Das Barrierefreiheitsstärkungsgesetz (BFSG), das die europäische Richtlinie zum European Accessibility Act umsetzt, verpflichtet seit Juni 2025 viele Unternehmen dazu, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten. Bildfehler, die gegen WCAG Level AA verstoßen, können dabei zu rechtlichen Risiken führen, wenn sie wesentliche Inhalte unzugänglich machen.

Besonders relevant sind folgende Fehlertypen:

Fehlende Alternativtexte bei informativen Bildern: Blinde Nutzerinnen und Nutzer erhalten keinen Zugang zu den transportierten Informationen.
Unzureichende Beschreibung komplexer Grafiken: Wenn Diagramme oder Infografiken nur mit einem generischen Alternativtext versehen sind, ist der Informationsgehalt nicht zugänglich.
Schriftgrafiken ohne Alternativtext: Text in Bildern, der nicht als solcher ausgezeichnet ist, bleibt für Screenreader-Nutzerinnen und -Nutzer unsichtbar.
Mangelnder Kontrast bei Text in Bildern: Kriterium 1.4.3 gilt auch für Text, der in Grafiken eingebettet ist.
Funktionale Bilder ohne beschreibenden Alternativtext: Wenn ein Bild als Schaltfläche oder Link fungiert und keinen aussagekräftigen Alternativtext hat, ist die Funktion für Screenreader-Nutzerinnen und -Nutzer nicht bedienbar.

Es ist wichtig zu verstehen, dass das Vorhandensein von Bildfehlern nicht automatisch zu rechtlichen Konsequenzen führt. Das BFSG sieht Überprüfungen und Beschwerdeverfahren vor; die konkrete rechtliche Bewertung im Einzelfall erfordert juristischen Rat. Automatisierte Tests helfen dabei, Schwachstellen frühzeitig zu identifizieren und zu dokumentieren, ersetzen aber keine rechtliche Beratung.

So unterstützt decareto bei der Barrierefreiheitsprüfung von Bildern

Unsere Barrierefreiheitssoftware prüft Websites automatisiert auf die beschriebenen Bildfehler und liefert strukturierte, priorisierte Berichte, die konkrete Handlungsempfehlungen enthalten. Dabei unterstützt uns folgendes Leistungsspektrum:

Automatische Erkennung fehlender oder leerer Alternativtexte bei <img>-Elementen, ARIA-Rollen und funktionalen Bildlinks
Prüfung von Farbkontrasten gemäß WCAG 1.4.3 und 1.4.11, auch bei Text in Grafiken
Erkennung von Schriftgrafiken und Hinweise auf mögliche Verstöße gegen Kriterium 1.4.5
Priorisierung nach Schweregrad (kritisch, schwerwiegend, mittel, geringfügig), damit Sie wissen, wo dringender Handlungsbedarf besteht
Dauerhaftes Monitoring von Websites mit automatischen Benachrichtigungen bei Änderungen, sodass neue Bildfehler nicht unbemerkt bleiben
Ergänzung manueller Prüfergebnisse direkt im Report, um auch Aspekte zu dokumentieren, die automatisierte Tests nicht erfassen können
Whitelabel-Berichte für Agenturen und externe Dienstleister, die Reports unter eigenem Logo an Kundinnen und Kunden weitergeben möchten

Ein gutes Ergebnis im decareto-Scan ist eine wichtige Grundlage, aber keine Garantie für vollständige Barrierefreiheit. Wir empfehlen immer, automatisierte Ergebnisse durch manuelle Tests zu ergänzen und bei rechtlichen Fragen juristischen Rat einzuholen. Starten Sie jetzt und testen Sie Ihre Website auf Barrierefreiheit mit decareto.

Dieser Text wurde mit Hilfe von KI erstellt und könnte Fehler beinhalten.