Bilder und Grafiken sind ein essenzieller Bestandteil jeder Webseite. Sie vermitteln Emotionen, erklären komplexe Sachverhalte und lockern Texte visuell auf. Doch nicht jede Nutzerin erlebt Bilder gleichermaßen. Menschen mit Sehbeeinträchtigung oder Screenreader-Nutzer sind auf die textuelle Beschreibung von Bildern angewiesen. Genau hier setzt die Web Content Accessibility Guidelines (WCAG) an.
In diesem Artikel erfährst du, wie du Bilder und Grafiken nach den WCAG-Richtlinien barrierefrei einsetzt und damit die Reichweite sowie Nutzerfreundlichkeit deiner Webseite deutlich steigerst.
Informative Bilder – also Grafiken, Fotos oder Diagramme, die relevante Informationen enthalten – müssen laut WCAG stets ein sinnvolles, beschreibendes alt-Attribut haben. Das alt-Attribut (kurz für „alternative text“) ist ein kurzer, prägnanter Text, der genau wiedergibt, was auf dem Bild dargestellt ist oder welche Funktion es erfüllt.
Stell dir vor, du beschreibst einem Freund am Telefon, was auf dem Bild zu sehen ist. Genau das sollte dein Alternativtext leisten:
Schlecht: alt="Chart"
Gut: alt="Säulendiagramm mit den Umsatzzahlen des 4. Quartals 2024"
Ein gut gewählter Alternativtext hilft Nutzerinnen von Screenreadern, das Bild vollständig zu verstehen. Dies ist nicht nur barrierefrei, sondern unterstützt auch deine Suchmaschinenoptimierung (SEO).
Wichtig: Der Alternativtext sollte nicht zu lang sein (etwa 100–150 Zeichen), es sei denn, das Bild ist sehr komplex – dazu kommen wir gleich.
Nicht jedes Bild auf deiner Webseite vermittelt wichtige Informationen. Manchmal nutzt du Bilder rein dekorativ, beispielsweise um eine visuelle Atmosphäre zu schaffen. WCAG empfiehlt für solche dekorativen Grafiken ausdrücklich, entweder ein leeres alt-Attribut (alt="") zu verwenden oder diese Bilder direkt über CSS einzubinden.
Warum ist das sinnvoll? Screenreader ignorieren Bilder mit leerem alt-Attribut komplett und lesen diese nicht vor. So werden Nutzerinnen nicht durch unwichtige Informationen abgelenkt oder verwirrt.
Beispiele für dekorative Bilder:
Hintergrundmuster
rein gestalterische Elemente
dekorative Icons ohne Funktionszweck
Einfach ausgedrückt: Wenn das Bild keine Informationen hinzufügt, sollte es auch nicht vorgelesen werden.
Manchmal verwendest du komplexe Infografiken, Diagramme oder technische Zeichnungen, die wichtige Daten vermitteln oder tiefere Zusammenhänge aufzeigen. Diese Grafiken lassen sich kaum sinnvoll in einem kurzen Alternativtext beschreiben. Die WCAG-Richtlinien geben vor, dass du in solchen Fällen eine ausführliche Beschreibung in Form einer sogenannten „Longdesc“ (lange Beschreibung) bereitstellst.
Es gibt zwei gängige Varianten, dies umzusetzen:
Longdesc-Attribut: Eine URL, die auf eine separate Seite verweist, wo die Grafik ausführlich beschrieben ist.
Linkbeschreibung: Du kannst eine sichtbare Verlinkung unter der Grafik platzieren, die zu einer detaillierten Beschreibung führt.
Ein typisches Beispiel: Du hast eine komplexe Infografik, die das Zusammenspiel verschiedener Marketingkanäle erklärt. Hier könnte ein kurzer Alternativtext lauten:
alt="Infografik zu Marketingkanälen"
und darunter ein Link zur ausführlichen Erklärung:
„Zur ausführlichen Beschreibung der Infografik“.
Dies stellt sicher, dass alle Nutzerinnen den vollständigen Inhalt erfassen können – unabhängig von visuellen Einschränkungen.
Damit du schnell in die Umsetzung kommst, hier einige praktische Tipps für die Integration in deinen Alltag:
Checkliste erstellen: Prüfe regelmäßig, ob alle informativen Bilder auf deiner Webseite sinnvolle Alternativtexte besitzen.
Vorlagen definieren: Nutze Vorlagen oder CMS-Funktionen, die dir automatisch Alternativtexte vorschlagen oder zwingend abfragen.
Interne Schulungen: Informiere dein Team, weshalb Alternativtexte wichtig sind und worauf beim Schreiben zu achten ist.
Neben der reinen Barrierefreiheit bieten sich dir als Betreiber einer Webseite viele weitere Vorteile:
SEO-Boost: Suchmaschinen lesen Alternativtexte aus, was deine Webseite besser auffindbar macht.
Rechtssicherheit: Du erfüllst rechtliche Vorgaben zur digitalen Barrierefreiheit und vermeidest mögliche Rechtsstreitigkeiten.
Erhöhte Reichweite: Barrierefreie Inhalte erreichen deutlich mehr Menschen – inklusive der ca. 7,8 Millionen Menschen mit Behinderung in Deutschland.
Ein regional tätiger Einzelhändler, der seine Webseite barrierefrei gestaltete, berichtete von einer signifikanten Erhöhung seiner Nutzerzahlen. Nach der Umsetzung der WCAG-konformen Gestaltung von Bildern und Infografiken stiegen die Verweildauer und Interaktionsraten merklich an. Vor allem die Nutzung der Webseite durch Menschen, die auf Hilfsmittel angewiesen sind, stieg spürbar.
Diese Ergebnisse unterstreichen, wie wirkungsvoll und wertvoll barrierefreie Webgestaltung für dein Business sein kann.
Die konsequente Umsetzung der WCAG-Richtlinien bei Bildern und Grafiken ist nicht nur eine gesetzliche Pflicht, sondern eröffnet auch enormes Potenzial für mehr Reichweite, Engagement und Kundenzufriedenheit.
Nutze diese Chance, deine Webseite für alle Nutzerinnen zugänglich zu machen und zeige, dass Inklusion für dich und dein Unternehmen mehr als nur ein Buzzword ist.
Möchtest du genau wissen, wie barrierefrei deine Webseite aktuell ist? Mit unserem Tool BarrierefreiPLUS analysierst du schnell und effektiv, wo du stehst und wie du deine Webseite barrierefrei gestaltest. Mehr Informationen findest du auf unserer Seite Barrierefreie Webseite – Mach deine Webseite barrierefrei.
Starte jetzt und werde Teil der digitalen Barrierefreiheitsbewegung!