Alt-Texte sind ein entscheidender Bestandteil barrierefreier Websites. Sie sorgen dafür, dass visuelle Inhalte für alle Nutzer zugänglich sind, und helfen gleichzeitig Suchmaschinen, Ihre Bilder zu verstehen. Gut gesetzte Alt-Texte tragen so zu besserer Auffindbarkeit, verständlichen Inhalten und einem inklusiven Nutzererlebnis bei.
In diesem Artikel erfahren Sie, warum Alt-Texte wichtig sind, wie sie technisch umgesetzt werden, wie man sie richtig formuliert, welche Sonderfälle es gibt und wie Sie schnell und einfach prüfen können, ob alle Bilder korrekt beschrieben sind.
Alt-Texte sind weit mehr als ein technisches Detail – sie sind ein zentraler Baustein für digitale Barrierefreiheit und gute Nutzererfahrungen.
Barrierefreiheit: Menschen mit Sehbehinderungen nutzen Screenreader, um Inhalte zu erfassen. Ohne Alt-Texte bleiben die Informationen, die über Bilder vermittelt werden, unsichtbar. Beispiel: Ein Diagramm mit wichtigen Ergebnissen ist für sehende Nutzer sofort verständlich – ohne Alt-Text entgeht diese Information jedoch Screenreader-Nutzern vollständig.
Bessere Nutzererfahrung: Auch für sehende Nutzer sind Alt-Texte hilfreich. Wenn Bilder nicht geladen werden – etwa durch eine langsame Internetverbindung – wird der Alt-Text im Browser angezeigt, sodass die zentrale Information erhalten bleibt.
SEO: Suchmaschinen können Bilder nicht direkt „sehen“. Sie greifen auf Alt-Texte zurück, um den Bildinhalt zu verstehen. Aussagekräftige Alt-Texte erhöhen so die Chance, dass die Seite in den Bildersuchergebnissen besser gefunden wird.
Rechtliche Vorgaben: Viele Websites unterliegen gesetzlichen Anforderungen an Barrierefreiheit (z. B. gemäß WCAG 2.1 oder dem europäischen Barrierefreiheitsgesetz). Alt-Texte sind ein zentraler Bestandteil dieser Vorgaben.
Ein Alt-Text (Alternativtext) ist eine kurze, beschreibende Angabe,die direkt im HTML-Code einesBildes hinterlegt wird, über das alt-Attribut:
<img src=“smartphone-vergleich.jpg“ alt=“Vergleich von zwei Smartphones: links kleineres, rechts größeres Gerät“>
Funktionendes Alt-Texts:
In folgendem Beispiel kann das zweite Bild aus technischen Gründen nicht geladen werden und es wird stattdessen der Alt-Text angezeigt. Dieses Beispiel zeigt, dass Alt-Texte auch für Nutzer ohne Sehbehinderung hilfreich sein können.
Normale Darstellung des Bildes:
Darstellung, wenn ein Bild nicht geladen werden kann:
Alt-Text vs. Alt-Tag vs. Titel-Attribut:
Relevante Bilder immer mit aussagekräftigem Alt-Text versehen. Dekorative Bilder werden mit alt=““ markiert, damit Screenreader sie gezielt ignorieren. „Es ist wichtig, das Alt-Attribut nicht komplett zu entfernen, da ein fehlendes Attribut von Screenreadern oft dazu führt, dass sie den Dateinamen oder den Bildpfad vorlesen – was für Nutzer verwirrend und störend ist.“
Ein guter Alt-Text beschreibt den Inhalt eines Bildes präzise, verständlich und passend zum Kontext der Seite. Er sollte den Nutzern helfen, die gleiche Information zu erfassen wie jemand, der das Bild sehen kann, und gleichzeitig für Screenreader und Suchmaschinen sinnvoll sein.
Alt-Texte sollten prägnant und verständlich sein, idealerweise um die 125 Zeichen, damit sie für Nutzer von Screenreadern und insbesondere für Braillezeilen gut erfassbar bleiben. Braillezeilen sind Geräte, die den Text in Blindenschrift zeilenweise darstellen. Längere Alt-Texte können zu Zeilenumbrüchen führen, was das Lesen etwas verlangsamt. Deshalb sollte ein Alt-Text nur so lang sein, wie nötig, um den wesentlichen Inhalt oder die Funktion des Bildes klar zu vermitteln.
Es ist wichtig, Redundanzen zu vermeiden. Wörter wie „Bild von…“ oder „Grafik zeigt…“ sind überflüssig, da Screenreader automatisch erkennen, dass es sich um ein Bild handelt. Ebenso sollte der Alt-Text den Kontext berücksichtigen: Informationen, die bereits im Text stehen, müssen nicht unnötig wiederholt werden, sondern der Alt-Text sollte ergänzen oder hervorheben, was das Bild zeigt.
Einige praktische Regeln helfen, die Qualität der Alt-Texte zu sichern:
Es gibt bestimmte Bildarten, bei denen die Alt-Text-Erstellung besondere Aufmerksamkeit erfordert, damit die Barrierefreiheit gewährleistet bleibt:
Icons
Icons als <img>: brauchen ein alt-Attribut mit Funktionsbeschreibung (z. B. alt=“Seite drucken“).
Icons als SVG oder Icon-Font: werden über aria-label oder aria-hidden zugänglich gemacht.
SVG-Dateien
SVG-Grafiken können komplexe Inhalte enthalten, die nicht automatisch vom Alt-Attribut erfasst werden. Hier sollten ARIA-Attribute oder ein Titel-Attribut genutzt werden, damit Screenreader die Information korrekt wiedergeben.
Hintergrundbilder
Bilder, die über CSS als Hintergrund eingebunden sind, werden von Screenreadern nicht erkannt. Für informative Inhalte sollten solche Grafiken daher nicht als Hintergrund, sondern als normale HTML-Bilder mit Alt-Text eingebunden werden. Dekorative Hintergrundbilder benötigen keinen Alt-Text.
Die folgenden Beispiele zeigen, wie sich Alt-Texte klar, prägnant und kontextbezogen formulieren lassen – und worauf man achten sollte:
Fotos
Ein guter Alt-Text für dieses Bild könnte heißen: Vergleich von zwei Smartphones: links kleineres, rechts größeres Gerät
Diagramme
Icons
Social-Media-Logo (als <img>)
Drucker-Symbol (als <img>)
Logos
Dekorative Elemente
Um sicherzustellen, dass alle Bilder korrekt beschrieben sind, können Sie die folgende Checkliste nutzen:
Alle informative oder funktionale Bilder mit Alt-Text versehen
Sinnvolle und kontextbezogene Texte
Funktionalität bei deaktivierten Bildern
Sonderfälle beachten
Alt-Texte prüfen
Praktischer Tipp: Auch längere Alt-Texte sollten so formuliert sein, dass sie in Braillezeilen gut lesbar bleiben, da dort Zeilenumbrüche entstehen können.
Alt-Texte sind ein essenzieller Bestandteil barrierefreier Websites. Sie machen Inhalte für Menschen mit Sehbehinderungen zugänglich, verbessern das Nutzererlebnis bei Ladeproblemen und unterstützen die Suchmaschinenoptimierung.
Wichtig ist, dass Alt-Texte präzise, kontextbezogen und verständlich formuliert werden. Dekorative Bilder sollten mit einem leeren Alt-Attribut (alt=““) versehen werden, während informative oder funktionale Bilder aussagekräftige Beschreibungen erhalten.
Sonderfälle wie Icons, SVGs oder Hintergrundbilder erfordern besondere Aufmerksamkeit, um die Barrierefreiheit auf allen Geräten zu gewährleisten. Mit systematischer Prüfung – z. B. über Browser-Entwicklertools, Screenreader oder Accessibility-Tools – lässt sich sicherstellen, dass alle Bilder korrekt beschrieben sind.
So tragen Sie dazu bei, dass Ihre Website für alle Besucher zugänglich und nutzerfreundlich bleibt.
Ein Alt-Text ist eine kurze Beschreibung eines Bildes, die im HTML-Code über das alt-Attribut hinterlegt wird. Er wird von Screenreadern vorgelesen und angezeigt, wenn das Bild nicht geladen werden kann.
Nur informative oder funktionale Bilder benötigen einen Alt-Text. Dekorative Bilder, die keinen Informationsgehalt haben, werden mit einem leeren Alt-Attribut (alt=““) versehen, damit sie von Screenreadern ignoriert werden.
Ein Alt-Text sollte kurz und prägnant formuliert sein. Als Richtwert gelten maximal 100–125 Zeichen. Längere Texte werden zwar von Screenreadern vollständig vorgelesen, können aber auf Braillezeilen (Geräte, die Text in Blindenschrift darstellen) zu Zeilenumbrüchen führen und dadurch den Lesefluss erschweren. Wo mehr Erklärung nötig ist – etwa bei komplexen Grafiken – sollte die ausführliche Beschreibung direkt im Text oder in einer separaten Bildbeschreibung erfolgen, nicht im Alt-Attribut.
Ob gesetzliche Anforderungen, technische Details oder allgemeine Orientierung – unsere Expert:innen beraten Sie persönlich, unkompliziert und kostenlos und zeigen Ihnen auch unsere Softwarelösung im Detail.
Sie sehen gerade einen Platzhalterinhalt von Google Maps. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
