Alternativtext (Alt-Text)

Alt-Text (Alternativtext) ist eine kurze Bildbeschreibung, die einem Bild oder einem anderen Nicht-Text-Inhalt programmatisch zugeordnet wird. Technisch erfolgt dies im Web über das alt-Attribut eines HTML-Elements.

Dieser Alternativtext beschreibt den Inhalt und Zweck eines Bildes in Textform und stellt sicher, dass visuelle Informationen auch ohne Bilddarstellung zugänglich bleiben.

Screenreader lesen den Alt-Text vor, wenn Nutzer Bilder nicht sehen können. Zusätzlich wird der Alternativtext angezeigt, wenn ein Bild nicht geladen werden kann.

Alt-Texte sind ein zentraler Bestandteil der digitalen Barrierefreiheit und in den internationalen Richtlinien der WCAG verbindlich verankert.

Barrierefreiheit & Zugänglichkeit: Menschen mit Sehbehinderungen nutzen Screenreader, um Text, Bilder, Fotos und Grafiken zu lesen und zu verstehen. Alt-Texte liefern eine textliche Beschreibung des Bildinhalts und stellen sicher, dass visuelle Informationen auch ohne Bilddarstellung zugänglich bleiben.

Der Alternativtext überträgt den Inhalt, Kontext und Zweck eines visuellen Elements in Textform. So erhalten Nutzer mit Screenreader die gleiche Information wie sehende Menschen.

Bessere Nutzererfahrung: Wird ein Bild technisch nicht geladen, zeigt der Browser den Alt-Text an. Der Text ersetzt damit das Bild und stellt den Zusammenhang weiterhin verständlich dar.

SEO & Suchmaschinenoptimierung: Suchmaschinen wie Google können Wörter und Sätze lesen, aber Bilder nicht sehen. Sie werten das alt-Attribut eines HTML-Elements aus, um zu verstehen, welchen Inhalt ein Bild darstellt. Wenn Sie aussagekräftige Alt-Texte schreiben, helfen Sie Suchmaschinen, Bilder in jedem Fall korrekt einzuordnen und verbessern die Sichtbarkeit in der Bildersuche.

Einheitliche Verwendung von Text-Alternativen: Werden Alt-Texte konsequent verwendet, verbessern sie sowohl die Barrierefreiheit als auch die Auffindbarkeit von Inhalten in Suchmaschinen.

Rechtliche Anforderungen: Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet viele Unternehmen dazu, digitale Inhalte barrierefrei bereitzustellen – dazu gehören auch korrekt gepflegte Alt-Texte für Bilder, Grafiken und Fotos.

Alt-Text (Alt-Attribut): Beschreibt den Inhalt oder die Funktion eines Bildes im HTML-Code über alt="…". Diese Bildbeschreibung wird von Screenreadern vorgelesen und ist für Barrierefreiheit verpflichtend.

Alt-Tag: Kein offizieller technischer Begriff. Gemeint ist in der Praxis fast immer das Alt-Attribut.

Title-Attribut: Liefert optionale Zusatzinformationen als Tooltip. Es dient nicht als Alternativtext und ersetzt keinen Alt-Text.

Nicht jedes Bild wird technisch auf die gleiche Weise eingebunden. Je nach Format und Einsatzbereich unterscheidet sich daher auch, wie ein passender Alternativ-Text bereitgestellt werden muss. Ziel ist immer, dass der Zweck oder die Information eines visuellen Elements auch für Screenreader-Nutzer eindeutig erfassbar ist.

Icons als img-Element: Werden Icons als normale Bilder eingebunden, benötigen sie einen Alt-Text, der ihre Funktion beschreibt – nicht ihr Aussehen. Beispiel: alt="Seite drucken" statt alt="Drucker-Icon".

SVG-Grafiken: SVGs enthalten häufig komplexere Inhalte. Je nach Implementierung sollten sie mit aria-label, einem title-Element oder der Rolle role="img" versehen werden, damit Screenreader eine verständliche Beschreibung erhalten.

Hintergrundbilder (CSS): Bilder, die ausschließlich per CSS als Hintergrund eingebunden sind, werden von Screenreadern nicht erkannt. Transportieren solche Grafiken Informationen, müssen sie als normales img-Element mit Alt-Text eingebunden werden. Rein dekorative Hintergrundbilder benötigen keine Alternativ-Texte.

Damit Alt-Texte dauerhaft eine hohe Qualität besitzen, sollten sie regelmäßig geprüft, gelesen und im Rahmen der Content-Pflege aktualisiert werden. Ziel ist es, sicherzustellen, dass jede Bildbeschreibung den tatsächlichen Inhalt, Kontext und Zweck eines Bildes, Fotos oder einer Grafik korrekt darstellt.

Eine saubere Pflege von Alternativ-Texten verbessert sowohl die Barrierefreiheit und Zugänglichkeit für Menschen als auch die Suchmaschinenoptimierung (SEO), da Suchmaschinen wie Google den Bildinhalt und deren Keywords über das alt-Attribut auswerten.

Browser-Entwicklertools: Über einen Rechtsklick auf ein Bild und „Element untersuchen“ lässt sich das alt-Attribut im HTML-Element direkt einsehen. So können Sie prüfen, ob eine sinnvolle textliche Beschreibung vorhanden ist.

Screenreader-Tests: Mit Screenreadern wie NVDA (Windows) oder VoiceOver (macOS) können Sie Alt-Texte vorlesen lassen und bewerten, ob Nutzer die Information verständlich lesen und erfassen können.

Accessibility-Tools: Automatische Prüfwerkzeuge wie WAVE oder axe zeigen fehlende, doppelte oder fehlerhafte Alternativ-Texte und unterstützen bei der Qualitätssicherung.

CMS-Backend: In Content-Management-Systemen lassen sich Alt-Texte direkt an Bildern pflegen. Prüfen Sie hier regelmäßig, ob neue Bilder, Grafiken und Fotos korrekt beschrieben sind und im passenden Kontext stehen.