{"id":9270,"date":"2026-10-27T08:00:00","date_gmt":"2026-10-27T08:00:00","guid":{"rendered":"https:\/\/decareto-test.qivoro.han-solo.net\/?p=9270"},"modified":"2026-08-14T12:51:49","modified_gmt":"2026-08-14T12:51:49","slug":"was-pruft-ein-wcag-test-bei-bildern-und-grafiken","status":"publish","type":"post","link":"https:\/\/decareto-test.qivoro.han-solo.net\/de\/was-pruft-ein-wcag-test-bei-bildern-und-grafiken\/","title":{"rendered":"Was pr\u00fcft ein WCAG-Test bei Bildern und Grafiken?"},"content":{"rendered":"

Ein WCAG-Test pr\u00fcft bei Bildern und Grafiken vor allem, ob visuelle Inhalte auch f\u00fcr Menschen zug\u00e4nglich sind, die sie nicht sehen k\u00f6nnen oder die auf unterst\u00fctzende Technologien wie Screenreader angewiesen sind. Im Mittelpunkt stehen Alternativtexte, die Behandlung dekorativer Elemente, ausreichende Farbkontraste sowie die verst\u00e4ndliche Aufbereitung komplexer visueller Inhalte. Die folgenden Abschnitte beantworten die wichtigsten Einzelfragen rund um die Barrierefreiheitspr\u00fcfung von Bildern.<\/p>\n

Welche WCAG-Kriterien gelten speziell f\u00fcr Bilder?<\/h2>\n

F\u00fcr Bilder und Grafiken sind im Rahmen der Web Content Accessibility Guidelines (WCAG) vor allem die Erfolgskriterien aus dem Bereich Wahrnehmbarkeit<\/strong> relevant. Das zentrale Kriterium ist 1.1.1 \u201eNicht-Text-Inhalt\u201c (Level A), das f\u00fcr alle nicht-textlichen Inhalte eine Textalternative fordert. Erg\u00e4nzend greifen Kriterien zu Farbkontrasten (1.4.3, 1.4.11) sowie zur Skalierbarkeit von Text in Grafiken.<\/p>\n

Die WCAG unterscheiden dabei nach der Funktion eines Bildes: Informative Bilder, funktionale Bilder (etwa Schaltfl\u00e4chen mit Icon), dekorative Bilder und komplexe Grafiken wie Diagramme werden unterschiedlich behandelt. Ein Barrierefreiheit-Test-Tool<\/a> pr\u00fcft automatisiert, ob die im HTML-Code hinterlegten Alternativtexte und ARIA-Attribute den jeweiligen Anforderungen entsprechen. Kriterium 1.4.5 regelt zus\u00e4tzlich den Einsatz von Schriftgrafiken und schr\u00e4nkt ihn ein, sofern der gleiche visuelle Eindruck auch mit echtem Text erreichbar w\u00e4re.<\/p>\n

F\u00fcr eine strukturierte BITV-Pr\u00fcfung, 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 \u00fcbernimmt.<\/p>\n

Wie pr\u00fcft ein WCAG-Test Alternativtexte bei Bildern?<\/h2>\n

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

Automatisierte Tools k\u00f6nnen technisch zuverl\u00e4ssig erkennen, ob ein alt<\/code>-Attribut vorhanden ist oder fehlt. Sie k\u00f6nnen jedoch nicht beurteilen, ob der Inhalt des Alternativtexts tats\u00e4chlich sinnvoll und treffend formuliert ist. Ein Alternativtext wie \u201eBild1234.jpg\u201c ist technisch vorhanden, inhaltlich aber wertlos f\u00fcr Screenreader-Nutzerinnen und -Nutzer.<\/p>\n

Was macht einen guten Alternativtext aus?<\/h3>\n

Ein guter Alternativtext beschreibt den wesentlichen Inhalt oder die Funktion eines Bildes pr\u00e4zise und knapp. Er sollte das Bild nicht mit \u201eBild von …\u201c oder \u201eGrafik zeigt …\u201c einleiten, da Screenreader die Bildrolle bereits ank\u00fcndigen. F\u00fcr ein Produktfoto eines roten Lederstuhls w\u00e4re \u201eRoter Lederstuhl mit Armlehnen\u201c angemessen, nicht \u201eStuhl\u201c oder \u201eM\u00f6bel\u201c.<\/p>\n

Wann ist ein leerer Alternativtext korrekt?<\/h3>\n

F\u00fcr dekorative Bilder, die keinen inhaltlichen Mehrwert liefern, ist ein leerer Alternativtext (alt=\"\"<\/code>) ausdr\u00fccklich korrekt und erw\u00fcnscht. Damit signalisiert der Code dem Screenreader, das Element zu \u00fcberspringen. Ein fehlendes alt<\/code>-Attribut hingegen f\u00fchrt dazu, dass manche Screenreader den Dateinamen vorlesen, was die Nutzung erheblich erschwert.<\/p>\n

Was gilt f\u00fcr dekorative Bilder und Hintergrundgrafiken?<\/h2>\n

Dekorative Bilder, die ausschlie\u00dflich gestalterischen Zwecken dienen und keine Information transportieren, m\u00fcssen laut WCAG-Kriterium 1.1.1 so ausgezeichnet werden, dass unterst\u00fctzende Technologien sie ignorieren. Der korrekte Weg ist ein leeres alt<\/code>-Attribut (alt=\"\"<\/code>). Hintergrundgrafiken, die per CSS eingebunden werden, sind f\u00fcr Screenreader grunds\u00e4tzlich unsichtbar und erfordern daher keinen Alternativtext.<\/p>\n

Ein h\u00e4ufiger Fehler besteht darin, dekorative Bilder ohne alt<\/code>-Attribut einzubinden oder ihnen einen Alternativtext wie \u201eDekoration\u201c zu geben. Ersteres kann dazu f\u00fchren, dass Screenreader den Dateinamen vorlesen; Letzteres erzeugt unn\u00f6tigen L\u00e4rm f\u00fcr Nutzerinnen und Nutzer, die auf diese Technologien angewiesen sind.<\/p>\n

Bei der Website-Barrierefreiheitspr\u00fcfung<\/a> werden Bilder ohne alt<\/code>-Attribut automatisch als Fehler markiert. Ob ein Bild tats\u00e4chlich dekorativ ist oder inhaltliche Relevanz hat, muss im Rahmen einer manuellen Pr\u00fcfung beurteilt werden, da diese Entscheidung von Kontext und Redaktionsstrategie abh\u00e4ngt.<\/p>\n

Wie werden Infografiken, Diagramme und komplexe Grafiken bewertet?<\/h2>\n

Komplexe Grafiken wie Infografiken, Diagramme oder Schaubilder erfordern nach WCAG-Kriterium 1.1.1 eine ausf\u00fchrlichere Textalternative, die den vollst\u00e4ndigen 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\u00e4ndigen Beschreibung oder eine strukturierte Datentabelle als Alternative anzubieten.<\/p>\n

Automatisierte Tests k\u00f6nnen bei Diagrammen pr\u00fcfen, ob \u00fcberhaupt ein Alternativtext vorhanden ist und ob ARIA-Attribute wie aria-describedby<\/code> korrekt eingesetzt werden. Sie k\u00f6nnen jedoch nicht beurteilen, ob die Beschreibung inhaltlich vollst\u00e4ndig und korrekt ist. Das ist eine der zentralen Grenzen automatisierter Barrierefreiheitspr\u00fcfungen: Ein gutes Testergebnis bedeutet nicht, dass keine Barrieren vorliegen, sondern lediglich, dass keine technisch erkennbaren Fehler gefunden wurden.<\/p>\n

F\u00fcr Diagramme in Datenvisualisierungen empfiehlt es sich zus\u00e4tzlich, die zugrunde liegenden Daten als Tabelle bereitzustellen. Das erf\u00fcllt nicht nur die Anforderungen an Barrierefreiheit, sondern verbessert auch die allgemeine Verst\u00e4ndlichkeit des Inhalts.<\/p>\n

Was pr\u00fcft ein WCAG-Test bei Schriftgrafiken und Text in Bildern?<\/h2>\n

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\u00fcr Logos und Wortmarken sowie f\u00fcr F\u00e4lle, in denen die grafische Darstellung f\u00fcr das Verst\u00e4ndnis wesentlich ist, etwa bei Schriftproben oder historischen Dokumenten.<\/p>\n

Schriftgrafiken stellen ein besonderes Barrierefreiheitsproblem dar, weil Text in Bildern nicht skalierbar ist. Nutzerinnen und Nutzer, die die Browservergr\u00f6\u00dferung verwenden oder auf eine hohe Schriftgr\u00f6\u00dfe angewiesen sind, erhalten beim Heranzoomen einer Schriftgrafik ein unscharfes Bild statt lesbaren Text. Zudem ist der eingebettete Text f\u00fcr Screenreader nicht direkt zug\u00e4nglich, sofern kein passender Alternativtext hinterlegt ist.<\/p>\n

Automatisierte Tests k\u00f6nnen Bilder mit Text erkennen, sofern diese als <img><\/code>-Element eingebunden sind, und pr\u00fcfen, ob ein Alternativtext vorhanden ist. Ob der Alternativtext den Textinhalt der Grafik vollst\u00e4ndig wiedergibt, muss manuell kontrolliert werden. Au\u00dferdem kann ein automatisierter Test nicht in jedem Fall beurteilen, ob eine Schriftgrafik notwendig ist oder durch echten Text ersetzt werden k\u00f6nnte.<\/p>\n

Welche Bildfehler f\u00fchren zu rechtlichen Risiken nach BFSG?<\/h2>\n

Das Barrierefreiheitsst\u00e4rkungsgesetz (BFSG), das die europ\u00e4ische 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\u00dfen, k\u00f6nnen dabei zu rechtlichen Risiken f\u00fchren, wenn sie wesentliche Inhalte unzug\u00e4nglich machen.<\/p>\n

Besonders relevant sind folgende Fehlertypen:<\/p>\n