Warum Alt-Texte bei Bildern wichtig sind
Bilder machen Websites lebendiger, vermitteln Informationen und helfen dabei, Produkte oder Dienstleistungen anschaulich zu präsentieren. Doch was passiert, wenn Besucher ein Bild nicht sehen können? Ohne eine passende Beschreibung gehen möglicherweise wichtige Informationen verloren.
Genau hier kommen sogenannte Alt-Texte ins Spiel. Sie sorgen dafür, dass der Inhalt oder die Funktion eines Bildes auch für Menschen zugänglich wird, die beispielsweise einen Screenreader verwenden. Gleichzeitig können sie Suchmaschinen dabei helfen, den Bildinhalt besser einzuordnen.
Allerdings benötigt nicht jedes Bild eine ausführliche Beschreibung. Entscheidend ist, welche Aufgabe es auf der Website erfüllt und welche Informationen es vermittelt.
Alt-Texte richtig einsetzen und Bilder zugänglich machen
Ein Alt-Text, auch Alternativtext genannt, ist eine kurze textliche Alternative zu einem Bild. Er wird im HTML-Code hinterlegt und kann von unterstützenden Technologien ausgegeben werden. Auch wenn ein Bild nicht geladen werden kann, steht dadurch eine Beschreibung zur Verfügung.
Für die Barrierefreiheit ist das besonders wichtig, denn viele Websites vermitteln Informationen nicht ausschließlich über Texte. Bilder können Produkte zeigen, Abläufe erklären oder als Bedienelemente dienen.
Ein sinnvoller Alternativtext berücksichtigt deshalb immer den Zusammenhang, in dem das Bild verwendet wird. Wir erklären, welche Bilder einen Alt-Text benötigen, wie dieser formuliert werden sollte und welche typischen Fehler Du vermeiden kannst.
1. Welche Bilder benötigen einen Alt-Text?
Nicht jedes Bild auf einer Website erfüllt denselben Zweck. Deshalb gibt es auch keine allgemeingültige Beschreibung, die für sämtliche Bildarten geeignet ist.
Grundsätzlich sollte zunächst unterschieden werden, ob ein Bild wichtige Informationen vermittelt oder ausschließlich der Gestaltung dient.
Informative Bilder
Informative Bilder vermitteln Inhalte, die für das Verständnis der Website relevant sind.
Dazu gehören beispielsweise Produktfotos, Abbildungen von Dienstleistungen oder Bilder, die bestimmte Tätigkeiten zeigen.
Der Alt-Text sollte die Informationen wiedergeben, die Besucher ohne das Bild nicht erkennen könnten.
Ein Foto von einem Handwerker bei der Dachmontage könnte beispielsweise mit „Dachdecker befestigt Dachziegel auf einem Steildach“ beschrieben werden.
Wichtig ist, dass die Beschreibung zum tatsächlichen Bildinhalt passt und die wesentlichen Informationen enthält.
Dekorative Bilder
Rein dekorative Bilder benötigen dagegen keinen beschreibenden Alt-Text.
Dazu gehören beispielsweise grafische Verzierungen, Hintergrundmuster oder Bilder, die lediglich zur optischen Auflockerung eingesetzt werden und keine zusätzlichen Informationen vermitteln.
Solche Bilder sollten technisch so gekennzeichnet werden, dass Screenreader sie überspringen können. Bei einem dekorativen HTML-Bild wird dafür üblicherweise ein leeres Alt-Attribut verwendet.
Das verhindert, dass Besucher unnötige Beschreibungen hören, die keinen Mehrwert bieten.
Bilder mit einer bestimmten Funktion
Manche Bilder dienen nicht nur der Darstellung, sondern übernehmen eine Funktion.
Das kann beispielsweise ein Lupensymbol sein, über das eine Suchfunktion geöffnet wird, oder ein Bild, das zu einer anderen Seite führt.
In solchen Fällen sollte der Alternativtext vor allem den Zweck des Bedienelements vermitteln.
Entscheidend ist deshalb nicht immer, was auf dem Bild zu sehen ist, sondern welche Bedeutung es im jeweiligen Zusammenhang besitzt.
2. Wie schreibt man einen guten Alt-Text?
Ein guter Alternativtext beschreibt die wesentliche Aussage eines Bildes möglichst verständlich und präzise.
Dabei kommt es weniger auf die Länge als auf den Informationsgehalt an. Eine ausführliche Beschreibung sämtlicher sichtbarer Details ist in vielen Fällen nicht erforderlich.
Hilfreich ist die Frage: Welche Information würde fehlen, wenn das Bild nicht angezeigt werden könnte?
Einige Beispiele verdeutlichen den Unterschied zwischen wenig hilfreichen und aussagekräftigen Beschreibungen.
Beispiel 1: Ein Produktfoto
Wenig hilfreich: „Produktbild“
Besser: „Schwarzer Lederrucksack mit zwei Außentaschen und braunen Trageriemen“
Die zweite Beschreibung vermittelt konkrete Informationen über das abgebildete Produkt.
Beispiel 2: Ein Foto einer Dienstleistung
Wenig hilfreich: „Handwerker bei der Arbeit“
Besser: „Elektriker installiert eine neue Steckdose in einer Wohnküche“
Hier wird erkennbar, welche Tätigkeit tatsächlich dargestellt wird.
Beispiel 3: Ein Bild von einem Firmengebäude
Wenig hilfreich: „Unsere Firma“
Besser: „Eingangsbereich des Firmengebäudes mit barrierefreiem Zugang“
Die Beschreibung nennt ein konkretes Merkmal, das für Besucher relevant sein kann, sofern es auf dem Bild tatsächlich erkennbar ist.
Worauf Du beim Formulieren achten solltest
- Wesentliche Informationen nennen: Beschreibe das, was für den jeweiligen Zusammenhang wichtig ist.
- Unnötige Einleitungen vermeiden: Formulierungen wie „Bild von“ oder „Foto zeigt“ sind bei gewöhnlichen Bildern meist überflüssig.
- Sachlich bleiben: Der Alt-Text sollte den tatsächlichen Bildinhalt wiedergeben und keine Eigenschaften erfinden.
- Wiederholungen vermeiden: Informationen, die unmittelbar neben dem Bild bereits vollständig stehen, müssen nicht unnötig wiederholt werden.
- Den Zusammenhang berücksichtigen: Dasselbe Bild kann auf unterschiedlichen Seiten eine andere Bedeutung besitzen.
Eine feste Zeichenbegrenzung für Alternativtexte gibt es in den WCAG nicht. Trotzdem sollten einfache Bildbeschreibungen möglichst kurz und verständlich bleiben.
3. Warum der Zusammenhang wichtiger ist als eine allgemeine Bildbeschreibung
Ein häufig unterschätzter Aspekt ist die Bedeutung des Bildes innerhalb der jeweiligen Website.
Ein und dasselbe Foto kann in unterschiedlichen Zusammenhängen verschiedene Informationen vermitteln.
Stellen wir uns beispielsweise ein Foto vor, auf dem mehrere Mitarbeiter vor einem Firmengebäude stehen.
Auf einer Seite über das Unternehmen könnte ein geeigneter Alternativtext lauten:
„Team des Unternehmens vor dem Firmengebäude“
Wird dasselbe Bild dagegen auf einer Seite verwendet, die ausschließlich den neuen Firmenstandort vorstellt, könnte die Beschreibung lauten:
„Neues Firmengebäude mit verglastem Eingangsbereich“
Voraussetzung ist natürlich, dass die genannten Merkmale tatsächlich auf dem Foto zu sehen sind.
Der Unterschied zeigt, warum Alt-Texte nicht einfach unabhängig vom Einsatzzweck formuliert werden sollten.
Wenn Bilder bereits durch den umgebenden Text erklärt werden
Auch der Zusammenhang mit Überschriften, Bildunterschriften und Fließtext spielt eine Rolle.
Steht beispielsweise unmittelbar unter einem Produktfoto bereits eine vollständige Beschreibung, muss der Alternativtext nicht sämtliche Informationen erneut wiedergeben.
Manchmal ist sogar ein leerer Alt-Text sinnvoll, wenn das Bild keine zusätzlichen Informationen vermittelt.
Entscheidend ist, dass der gesamte Inhalt verständlich bleibt und Menschen, die das Bild nicht wahrnehmen können, keine wichtigen Informationen verlieren.
4. Besondere Anforderungen bei verlinkten Bildern und Symbolen
Auf Unternehmenswebsites werden Bilder häufig als anklickbare Elemente eingesetzt. Dazu gehören beispielsweise Produktbilder, Teaser oder grafische Schaltflächen.
Hier muss der Alternativtext eine andere Aufgabe erfüllen als bei einem gewöhnlichen Foto.
Dient ein Bild als einziger Inhalt eines Links, sollte die Textalternative den Zweck des Links verständlich machen.
Ein Warenkorbsymbol könnte beispielsweise mit „Warenkorb öffnen“ bezeichnet werden.
Bei einem Logo, das zur Startseite führt, kann eine Beschreibung wie „Firmenname, zur Startseite“ sinnvoll sein.
Wichtig ist, dass Screenreader-Nutzer erkennen können, welche Aktion durch das jeweilige Element ausgelöst wird.
Vorsicht bei mehrfach beschrifteten Links
Ein häufiger Fall sind Teaser, bei denen sowohl ein Bild als auch eine Überschrift auf dieselbe Unterseite verlinken.
Wird beides innerhalb eines gemeinsamen Links ausgegeben, sollte die Bildbeschreibung nicht einfach dieselbe Information wie die sichtbare Überschrift wiederholen.
Andernfalls kann eine unnötig lange oder doppelte Linkbezeichnung entstehen.
Die technische Umsetzung und der tatsächliche Informationsgehalt des Bildes entscheiden deshalb darüber, welche Beschriftung geeignet ist.
5. Komplexe Infografiken benötigen mehr als einen kurzen Alt-Text
Nicht jedes Bild lässt sich mit einem einzigen kurzen Satz ausreichend beschreiben.
Besonders Infografiken, Diagramme, Ablaufpläne oder umfangreiche Schaubilder enthalten häufig zahlreiche Informationen.
Ein Alternativtext wie „Diagramm zur Umsatzentwicklung“ kann zwar das Thema benennen, vermittelt aber noch nicht die eigentlichen Daten oder Zusammenhänge.
In solchen Fällen ist es sinnvoll, die zentrale Aussage im Alt-Text zusammenzufassen und zusätzliche Informationen an anderer Stelle bereitzustellen.
Das kann beispielsweise durch einen erläuternden Absatz oder eine strukturierte Darstellung der enthaltenen Daten erfolgen.
Bei einem Diagramm zur Umsatzentwicklung könnten die wichtigsten Ergebnisse deshalb direkt im umgebenden Text erläutert werden.
Die Informationen sollten auch dann verständlich bleiben, wenn das eigentliche Bild nicht wahrgenommen werden kann.
Alt-Texte bei der regelmäßigen Inhaltspflege berücksichtigen
Auch eine technisch barrierefrei entwickelte Website kann im Laufe der Zeit neue Barrieren enthalten.
Werden beispielsweise regelmäßig neue Produktbilder, Teamfotos oder andere Inhalte veröffentlicht, sollten die jeweiligen Alternativtexte direkt bei der Einpflege berücksichtigt werden.
Viele Content-Management-Systeme bieten dafür entsprechende Eingabefelder.
Wichtig ist, dass die verantwortlichen Mitarbeiter wissen, wann ein Bild eine Beschreibung benötigt und wie diese sinnvoll formuliert wird.
Eine fachgerechte Einrichtung des Systems kann dabei helfen, den Umgang mit Bildern zu vereinfachen und typische Fehler zu vermeiden.
Gerade bei umfangreichen Websites ist es sinnvoll, vorhandene Bilder regelmäßig zu überprüfen und fehlende oder ungeeignete Alternativtexte zu korrigieren.
Bilder und Inhalte Deiner Website barrierefrei gestalten lassen
Passende Alternativtexte sind ein wichtiger Bestandteil einer zugänglichen Website. Sie allein reichen jedoch nicht aus, um einen Internetauftritt vollständig barrierefrei zu gestalten.
Entscheidend ist das Zusammenspiel aus sinnvoll aufbereiteten Inhalten, geeigneter Gestaltung und einer technisch korrekten Umsetzung.
Wir übernehmen die Prüfung, Planung, Gestaltung und technische Umsetzung barrierefreier Websites. Dabei berücksichtigen wir auch den richtigen Einsatz von Bildern, Alternativtexten und grafischen Elementen.
Wir prüfen vorhandene Inhalte auf mögliche Barrieren, entwickeln passende Lösungen und übernehmen die notwendigen Anpassungen. Auch bei neuen Websites achten wir darauf, dass Bilder und andere Medien von Anfang an sinnvoll und möglichst zugänglich eingebunden werden.
Du möchtest die Bilder und Inhalte Deiner Website auf Barrierefreiheit prüfen und optimieren lassen? Nimm Kontakt mit uns auf. Wir beraten Dich gerne und übernehmen die Umsetzung für Deinen Internetauftritt.
FAQ - Häufige Fragen zu Alt-Texten bei Bildern
Jedes gewöhnliche HTML-Bildelement sollte ein Alt-Attribut besitzen. Das bedeutet jedoch nicht, dass jedes Bild eine ausführliche Beschreibung benötigt.
Informative Bilder benötigen eine geeignete Textalternative, während rein dekorative Bilder üblicherweise mit einem leeren Alt-Attribut versehen werden.
Wichtig ist diese Unterscheidung insbesondere für Menschen, die Screenreader verwenden. So erhalten sie die relevanten Informationen, ohne durch unnötige Bildbeschreibungen abgelenkt zu werden.
Ja. Bei vielen Websites lassen sich Alternativtexte direkt über das verwendete Content-Management-System ergänzen oder ändern.
Wie das funktioniert, hängt vom jeweiligen System und der technischen Einbindung der Bilder ab.
Bei manchen Bildern genügt eine redaktionelle Anpassung. Werden Grafiken dagegen über individuelle Vorlagen oder spezielle Funktionen eingebunden, können technische Änderungen notwendig sein.
Besonders bei umfangreichen Websites empfiehlt es sich, zunächst festzustellen, welche Bilder tatsächlich relevante Informationen vermitteln und welche Beschreibungen fehlen.
KI-basierte Werkzeuge können Bildinhalte erkennen und daraus Vorschläge für Alternativtexte erzeugen.
Solche Beschreibungen sind jedoch nicht immer korrekt oder für den jeweiligen Zusammenhang geeignet. Beispielsweise kann eine automatische Bilderkennung sichtbare Details falsch interpretieren oder die eigentliche Funktion des Bildes auf der Website nicht berücksichtigen.
Deshalb sollten automatisch erzeugte Alternativtexte grundsätzlich überprüft und bei Bedarf angepasst werden.
KI kann die redaktionelle Arbeit erleichtern, ersetzt aber nicht die Entscheidung darüber, welche Informationen das Bild tatsächlich vermitteln soll.
Das hängt von ihrer Funktion ab.
Ein Firmenlogo kann beispielsweise eine Textalternative mit dem Unternehmensnamen benötigen. Wird es gleichzeitig als Link zur Startseite verwendet, sollte auch dieser Zweck verständlich erkennbar sein.
Bei Icons kommt es darauf an, ob sie eine wichtige Information vermitteln oder lediglich dekorativ eingesetzt werden.
Ein Symbol neben einer bereits verständlich beschrifteten Schaltfläche benötigt häufig keine zusätzliche Beschreibung. Ein alleinstehendes Symbol, über das eine Funktion ausgelöst wird, muss dagegen eine zugängliche Bezeichnung besitzen.
Ja, eine unzutreffende Beschreibung kann Besucher in die Irre führen.
Wenn beispielsweise ein Bild eine bestimmte Dienstleistung zeigt, der Alternativtext aber eine andere Tätigkeit beschreibt, erhalten Screenreader-Nutzer falsche Informationen.
Auch automatisch eingefügte Dateinamen oder lange Aneinanderreihungen von Suchbegriffen sind häufig wenig hilfreich.
Deshalb sollten Alternativtexte nicht nur vorhanden sein, sondern den tatsächlichen Inhalt beziehungsweise die Funktion eines Bildes sinnvoll wiedergeben.
Nein. Eine Bildunterschrift ist ein sichtbarer Text, der ein Bild ergänzt oder zusätzliche Informationen liefert.
Ein Alternativtext ist dagegen eine im Code hinterlegte Textalternative, die insbesondere von unterstützenden Technologien verwendet wird.
Beide können unterschiedliche Aufgaben übernehmen.
Beispielsweise kann unter einem Foto die Bildunterschrift „Unser neuer Standort in Bautzen“ stehen, während der Alternativtext ein relevantes, sonst nicht beschriebenes Merkmal des Gebäudes nennt.
Wichtig ist, dass sich die Informationen sinnvoll ergänzen und nicht unnötig wiederholen.
Nicht grundsätzlich. Bereits vorhandene und sinnvoll formulierte Alternativtexte können bei einem Relaunch häufig übernommen werden.
Allerdings sollte überprüft werden, ob die Bilder weiterhin in demselben Zusammenhang eingesetzt werden und ob ihre Beschreibungen noch passen.
Werden Bilder an anderen Stellen verwendet, neue Teaser erstellt oder Inhalte grundlegend verändert, können auch andere Textalternativen sinnvoll sein.
Ein Relaunch bietet deshalb eine gute Gelegenheit, den vorhandenen Bildbestand zu überprüfen und die Alternativtexte bei Bedarf gezielt zu überarbeiten.
Für Alternativtexte gibt es keine allgemein vorgeschriebene Zeichenanzahl. Entscheidend ist, dass die wesentlichen Informationen eines Bildes verständlich vermittelt werden.
Bei einfachen Fotos reicht häufig ein kurzer Satz. Ein Alt-Text wie „Mitarbeiterin berät einen Kunden im Geschäft“ kann beispielsweise bereits alle wichtigen Informationen enthalten.
Komplexe Grafiken oder Schaubilder benötigen möglicherweise ausführlichere Erläuterungen. Diese sollten dann sinnvoll im umgebenden Text ergänzt werden, statt sämtliche Informationen in einem sehr langen Alt-Text unterzubringen.
Ja, sofern die einzelnen Bilder relevante Informationen vermitteln, sollten sie jeweils eine passende Beschreibung erhalten.
Zeigt eine Bildergalerie beispielsweise unterschiedliche Räume eines Hotels, sollte jeder Alt-Text den jeweiligen Raum und wichtige sichtbare Merkmale beschreiben. Identische Beschreibungen wie „Hotelzimmer“ für sämtliche Bilder wären wenig hilfreich.
Bei rein dekorativen Bildern kann dagegen ein leerer Alt-Text sinnvoll sein.
Neben den Bildbeschreibungen spielt auch die technische Umsetzung der Galerie eine Rolle. Die Navigation und Bedienung müssen ebenfalls zugänglich gestaltet werden.
Das hängt davon ab, welche Funktion das Hintergrundbild erfüllt.
Rein dekorative CSS-Hintergrundbilder benötigen normalerweise keinen Alternativtext. Sie dienen lediglich der Gestaltung und vermitteln keine zusätzlichen Informationen.
Anders sieht es aus, wenn ein Hintergrundbild wichtige Inhalte enthält, beispielsweise einen Schriftzug, eine Infografik oder eine Information, die an keiner anderen Stelle verfügbar ist.
CSS-Hintergrundbilder besitzen kein eigenes Alt-Attribut. Solche Informationen müssen deshalb auf anderem Weg zugänglich gemacht werden. Häufig ist es sinnvoller, informative Bilder direkt als HTML-Bildelement einzubinden oder die relevanten Informationen zusätzlich als Text bereitzustellen.
Fehlt das Alt-Attribut vollständig, können Screenreader je nach technischer Umsetzung und verwendeter Software versuchen, andere Informationen auszugeben. Dazu gehören beispielsweise Dateinamen oder Teile der Bildadresse.
Statt einer verständlichen Bildbeschreibung hören Besucher dann möglicherweise eine wenig aussagekräftige Zeichenfolge.
Bei rein dekorativen Bildern sollte deshalb ein leeres Alt-Attribut verwendet werden. Informative Bilder benötigen dagegen eine passende Beschreibung.
Der Unterschied zwischen einem fehlenden und einem bewusst leeren Alt-Attribut ist für die barrierefreie Umsetzung besonders wichtig.
Ja, sinnvoll formulierte Alt-Texte können Suchmaschinen dabei helfen, Bildinhalte besser zu verstehen und thematisch einzuordnen.
Das kann insbesondere für die Google-Bildersuche relevant sein. Allerdings sind Alternativtexte nur einer von mehreren Faktoren, die bei der Einordnung von Bildern eine Rolle spielen.
Entscheidend ist, den tatsächlichen Bildinhalt verständlich zu beschreiben. Eine künstliche Ansammlung von Suchbegriffen bietet Besuchern keinen Mehrwert und ist auch für die Suchmaschinenoptimierung keine sinnvolle Vorgehensweise.
Barrierefreiheit sollte deshalb immer Vorrang vor einer rein auf Keywords ausgerichteten Bildbeschreibung haben.
Ja. Wir übernehmen die Prüfung, Planung sowie die technische und redaktionelle Optimierung Deiner Website. Dazu gehört auch die Überprüfung von Bildern, Alternativtexten und grafischen Bedienelementen auf mögliche Barrieren.
Wir untersuchen, welche Bilder relevante Informationen vermitteln, wo Beschreibungen fehlen und ob die vorhandenen Texte für den jeweiligen Einsatzzweck geeignet sind. Anschließend übernehmen wir die vereinbarten Anpassungen und sorgen für eine fachgerechte technische Einbindung.
Auch bei der Entwicklung neuer Websites berücksichtigen wir den zugänglichen Einsatz von Bildern und grafischen Inhalten von Anfang an.
Du möchtest Deine Website barrierefreier gestalten und vorhandene Bilder professionell überprüfen lassen? Nimm Kontakt mit uns auf. Wir beraten Dich gerne und übernehmen die notwendigen Arbeiten für Deinen Internetauftritt.