Themen
Alt-Texte auf Websites richtig einsetzen
Dieser Leitfaden erklärt, warum Alt-Texte wichtig sind, wann Bilder eine Textalternative brauchen, wie gute Alt-Texte formuliert werden und welche typischen Fehler in CMS-, Redaktions- und Upload-Prozessen auf Websites entstehen.
Alt-Texte sind kein Pflichtfeld, das man einfach irgendwie ausfüllt. Eine gute Textalternative beschreibt nicht bloß ein Bild, sondern gibt seinen Zweck oder die relevante Information wieder. Manchmal ist das ein kurzer Satz. Manchmal ist ein leerer Alt-Text richtig. Und manchmal reicht ein Alt-Text allein überhaupt nicht aus.
Warum Alt-Texte wichtig sind
Alt-Texte sorgen dafür, dass Bilder auch dann verständlich bleiben, wenn sie nicht gesehen werden können. Das betrifft zum Beispiel Menschen, die Screenreader nutzen, Inhalte stark vergrößern, Bilder nicht laden können oder visuelle Informationen aus anderen Gründen nicht zuverlässig wahrnehmen. Ohne passende Textalternative geht wichtige Information schnell verloren.
In der Praxis sind Alt-Texte weit mehr als ein technisches Detail. Sie entscheiden darüber, ob ein Produktfoto sinnvoll eingeordnet werden kann, ob ein verlinktes Logo verständlich ist, ob eine Infografik zugänglich bleibt und ob ein Formular- oder Button-Icon überhaupt eine erkennbare Funktion hat. Gerade auf inhaltsstarken Websites entstehen hier viele Barrieren nicht im Code, sondern im Redaktionsalltag.
Was ein Alt-Text überhaupt ist
Ein Alt-Text ist die Textalternative für ein Bild. Er soll nicht einfach jede visuelle Einzelheit aufzählen, sondern den Zweck oder die relevante Information des Bildes wiedergeben. Entscheidend ist also nicht: „Was sieht man alles?“, sondern: „Was muss jemand wissen, der das Bild nicht sehen kann?“
Dabei ist wichtig, Alt-Text nicht mit sichtbaren Bildunterschriften zu verwechseln. Eine Bildunterschrift ist für alle sichtbar und kann zusätzliche Einordnung bieten. Der Alt-Text ist die kurze textliche Alternative für das Bild selbst. Wenn die wesentliche Information schon direkt daneben im Text steht, kann ein leerer Alt-Text die richtige Lösung sein, damit Screenreader keine unnötige Wiederholung ausgeben.
Wann ein Bild einen Alt-Text braucht
Ein Bild braucht einen Alt-Text, wenn es eine Information vermittelt oder eine Funktion erfüllt. Das gilt für informative Bilder, Fotos mit inhaltlicher Aussage, Icons mit Bedeutung, verlinkte Grafiken, Buttons mit Bildsymbolen, Bilder mit Text oder Logos, wenn ihre Funktion ohne Bild nicht verständlich wäre.
Für funktionale Bilder ist besonders wichtig, dass der Alt-Text die Funktion und nicht die Optik beschreibt. Wenn ein Lupen-Icon die Suche öffnet, ist „Suche“ sinnvoll und nicht „Lupe“. Wenn ein verlinktes Logo zur Startseite führt, sollte die Textalternative diesen Zweck vermitteln und nicht nur den Bildtyp beschreiben.
Faustregel: Wenn ein Nutzer ohne Bild etwas Wichtiges verpasst oder eine Funktion nicht versteht, braucht das Bild eine brauchbare Textalternative.
Wann ein Bild keinen Alt-Text braucht
Nicht jedes Bild braucht eine beschreibende Textalternative. Wenn ein Bild rein dekorativ ist, keine zusätzliche Information trägt oder die relevante Aussage bereits direkt im umgebenden Text steht, ist ein leerer Alt-Text oft die bessere Lösung. Dadurch wird verhindert, dass Screenreader unnötige oder störende Wiederholungen vorlesen.
Wichtig ist dabei der Unterschied zwischen leerem Alt-Text und fehlendem Alt-Text. Ein dekoratives Bild sollte nicht einfach ohne Entscheidung im CMS landen. Fehlt die Textalternative ganz, lesen Hilfstechnologien unter Umständen Dateinamen oder andere technische Reste vor. Ein bewusst leerer Alt-Text ist etwas anderes als ein vergessenes Feld.
Wie gute Alt-Texte formuliert werden
Gute Alt-Texte sind so kurz wie möglich und so präzise wie nötig. Sie geben die relevante Information wieder, nicht jeden sichtbaren Nebenaspekt. Für ein einfaches Produktfoto reicht oft ein knapper, verständlicher Satz. Für ein funktionales Bild reicht manchmal sogar ein einzelnes treffendes Wort, wenn es die Aktion korrekt beschreibt.
Was gut funktioniert
Den Zweck oder die Kernaussage nennen, relevante Informationen priorisieren, Redundanzen vermeiden und so formulieren, dass die Textalternative auch ohne Bild sinnvoll verständlich ist.
Was vermieden werden sollte
Dateinamen, Fülltexte, bloße Bildtypen wie „Bild von“, unnötige Details, doppelte Beschreibungen und Formulierungen, die den eigentlichen Zweck des Bildes verfehlen.
Ob ein Alt-Text gut ist, entscheidet sich fast immer am Kontext. Dasselbe Foto kann auf einer Nachrichtenseite informativ sein, in einer rein dekorativen Hero-Fläche aber keine zusätzliche Information tragen. Gute Alt-Texte entstehen deshalb nicht nur durch Formulierungsregeln, sondern durch das richtige Verständnis der Bildfunktion.
Welche Bildarten unterschiedlich behandelt werden müssen
Informative Bilder
Fotos, Illustrationen oder Grafiken, die eine Information transportieren, bekommen einen kurzen Alt-Text mit genau dieser Information.
Dekorative Bilder
Wenn ein Bild nur Gestaltung ist und keine zusätzliche Information trägt, sollte es mit leerem Alt-Text aus dem Vorlesefluss herausgenommen werden.
Funktionale Bilder
Bei Buttons, Links oder klickbaren Logos beschreibt der Alt-Text die Funktion oder das Ziel, nicht das Aussehen des Symbols.
Komplexe Grafiken und Charts
Hier reicht ein kurzer Alt-Text meist nicht. Die wesentliche Information muss zusätzlich im Fließtext, in einer Beschreibung oder in einer strukturierten Darstellung verfügbar sein.
Bilder mit Text
Wenn Text nur im Bild vorkommt, muss dieser Inhalt zugänglich gemacht werden. Im Zweifel sollte echter HTML-Text statt Bildtext verwendet werden. Ist das nicht möglich, muss die Textalternative den relevanten Textinhalt wiedergeben.
Typische Fehler in der Praxis
- Dateinamen und generische Fülltexte: Bezeichnungen wie `bild.jpg`, `teaser_01` oder „Foto“ helfen niemandem.
- Doppelte Beschreibung: Wenn die relevante Information direkt daneben schon vollständig im Text steht, wird ein weiterer ausgeschriebener Alt-Text schnell zur Störung.
- Dekorative Bilder mit unnötigem Alt-Text: Das erzeugt unnötige Vorleselast und lenkt von wichtigen Inhalten ab.
- Wichtige Bilder ganz ohne Alt-Text: Dadurch fehlt Information oder Funktion vollständig für Menschen, die das Bild nicht wahrnehmen können.
- Link- oder Button-Grafiken ohne sinnvolle Alternative: Ein Symbol ohne klare Textalternative macht Funktionen unverständlich.
- Charts und Infografiken zu knapp behandelt: Ein kurzer Alt-Text reicht für komplexe Daten oder Zusammenhänge fast nie.
- Bilder mit Text, dessen Inhalt nicht zugänglich ist: Wenn sichtbarer Text nur als Grafik existiert, gehen Inhalte schnell verloren.
Wie man Alt-Texte sinnvoll prüft
Alt-Texte prüft man am besten nicht nur technisch, sondern redaktionell. Die Frage ist nicht bloß, ob irgendwo ein Feld gefüllt wurde, sondern ob die Textalternative den Zweck des Bildes tatsächlich wiedergibt. Wer nur automatisch auf „fehlendes alt“ prüft, übersieht viele schlechte oder irrelevante Beschreibungen.
1. Bildfunktion klären
Ist das Bild informativ, dekorativ, funktional oder komplex? Ohne diese Einordnung ist kein guter Alt-Text möglich.
2. Kontext mitprüfen
Ein Alt-Text ist nur im Zusammenspiel mit Überschrift, Text und Funktion zu beurteilen. Was auf einer Seite sinnvoll ist, kann auf einer anderen redundant sein.
3. Redundanz vermeiden
Wenn die relevante Aussage bereits direkt neben dem Bild steht, sollte geprüft werden, ob ein leerer Alt-Text sinnvoller ist.
4. Komplexe Bilder extra behandeln
Bei Diagrammen, Karten oder erklärenden Grafiken muss die volle Information außerhalb des Alt-Texts zugänglich gemacht werden.
5. Mit echten Inhalten prüfen
Die besten Regeln nützen wenig, wenn sie nur an Beispieldaten getestet werden. Prüfe echte Teaserbilder, Produktbilder, Logos, Kampagnenmotive und Infografiken aus dem laufenden Betrieb.
Wenn du prüfen willst, welche weiteren Anforderungen neben Alt-Texten für deine Website relevant sind, hilft dir auch der umfassendere Leitfaden Was eine barrierefreie Website leisten muss.
Wie Betreiber und Redaktionen Alt-Texte im Alltag absichern
Alt-Texte entstehen auf vielen Websites nicht in der Entwicklung, sondern im CMS. Deshalb müssen Regeln und Verantwortlichkeiten dort greifen, wo Bilder tatsächlich hochgeladen und gepflegt werden. Wenn Alt-Texte nur als nachträgliche Korrektur verstanden werden, gehen sie im Alltag fast immer verloren.
- 1. Klare Redaktionsregeln festlegen: Definiere, wann Alt-Texte erforderlich sind, wann sie leer bleiben sollen und wer für die Entscheidung zuständig ist.
- 2. CMS-Felder sinnvoll gestalten: Upload-Dialoge und Eingabemasken sollten die Entscheidung über dekorativ, informativ und funktional unterstützen statt nur ein blindes Pflichtfeld zu zeigen.
- 3. Beispiele bereitstellen: Teams schreiben bessere Alt-Texte, wenn sie konkrete gute und schlechte Beispiele für den eigenen Content-Typ sehen.
- 4. Qualitätskontrolle einbauen: Prüfe neue Inhalte stichprobenartig im laufenden Betrieb, nicht nur bei Relaunches.
- 5. Komplexe Bildformate früh erkennen: Charts, Karten oder Bildtext sollten schon bei der Konzeption als Sonderfall behandelt werden, nicht erst kurz vor Veröffentlichung.