Alternativtext (Alt-Text)

Alt-Texte (Alternativtexte) sind 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. Er ist ein elementarer Baustein für guten Content und stellt sicher, dass visuelle Informationen auch ohne Bilddarstellung für jeden zugänglich bleiben.

Screenreader lesen die Alt-Texte vor, wenn Nutzer Bilder nicht sehen können. Ein weiteres gutes Beispiel für ihren Nutzen: Der Alternativtext wird im Browser sichtbar, wenn eine Grafik technisch nicht geladen werden kann.

Alt-Texte sind somit ein zentraler Bestandteil der digitalen Zugänglichkeit und in den internationalen Richtlinien der WCAG verbindlich verankert.

Mehr zu den WCAG-Richtlinien →

Digitale Inklusion: Spezielle Vorleseprogramme (Screenreader), die von Sehbehinderten genutzt werden, greifen auf den Text zurück, um Bilder, Fotos und Grafiken verständlich zu machen. Alt-Texte liefern eine exakte textliche Beschreibung des Bildinhalts.

Der Alternativtext überträgt den Kontext und Zweck eines visuellen Elements. So erhalten alle Nutzer die gleiche Information wie sehende Menschen.

Bessere Nutzererfahrung: Ein weiterer wichtiger Grund für Alt-Texte: Wird ein Bild nicht geladen, zeigt der Browser den Text als Platzhalter an. Das bewahrt in jedem Fall den inhaltlichen Zusammenhang der Seite.

SEO und Suchmaschinenoptimierung: Suchmaschinen wie Google können Wörter lesen, aber Bilder nicht visuell verstehen. Sie werten das alt-Attribut aus, um zu begreifen, was ein Bild darstellt. Wenn Sie aussagekräftige Alt-Texte schreiben und das relevante Keyword sinnvoll einbinden, helfen Sie Suchmaschinen, Bilder korrekt einzuordnen.

Verlinkungen: Wenn ein Bild als Link fungiert, dient der Alt-Text der Suchmaschine und dem Screenreader gleichzeitig als Ankertext, um das Ziel der Verlinkung zu erklären.

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

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 Vorleseprogramme 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 inhaltliche Informationen, müssen sie als normales img-Element mit Text-Alternative eingebunden werden.