Alternativtexte für Bilder: Was Website-Betreiber beachten sollten

Was müssen Website-Betreiber bei Alternativtexten für Bilder beachten?

Alternativtexte für Bilder auf einer Website sollen nicht einfach wiedergeben, was optisch zu sehen ist. Sie müssen den Zweck oder die Information vermitteln, die das Bild im jeweiligen Zusammenhang erfüllt. Menschen, die einen Screenreader verwenden, Bilder deaktiviert haben oder bestimmte visuelle Inhalte nicht erkennen können, erhalten dadurch eine verständliche Alternative.

Nach dem Erfolgskriterium 1.1.1 der WCAG 2.2 benötigen nicht-textliche Inhalte grundsätzlich eine Textalternative, die denselben Zweck erfüllt. Für dekorative Elemente, Bedienelemente, komplexe Darstellungen und andere besondere Fälle gelten dabei unterschiedliche Anforderungen. Die fachlichen Grundlagen beschreibt die offizielle Erläuterung des W3C zu nicht-textlichen Inhalten.

Die zentrale Frage lautet deshalb nicht nur, was auf einem Bild abgebildet ist. Website-Betreiber sollten prüfen, warum das Bild an dieser Stelle verwendet wird und welche Information ohne seine Wahrnehmung fehlen würde. Erst daraus ergibt sich ein sinnvoller Alternativtext.

Welche Bilder benötigen welchen Alternativtext?

Vor dem Formulieren sollte jedes Bild nach seiner tatsächlichen Funktion eingeordnet werden. Die gleiche Bilddatei kann abhängig vom Einsatzort eine andere Bedeutung besitzen und deshalb unterschiedliche Alternativtexte benötigen.

• Informative Bilder benötigen einen Alternativtext, der ihre wesentliche Aussage oder die für den Inhalt relevante Information vermittelt.
• Rein dekorative Bilder erhalten einen leeren Alternativtext, damit assistive Technik sie überspringen kann.
• Funktionale Bilder und Icons müssen die ausgelöste Aktion oder das Ziel des Bedienelements benennen.
• Bilder mit relevantem Text benötigen eine Textalternative, die den sichtbaren Inhalt oder dessen Funktion wiedergibt.
• Komplexe Grafiken benötigen eine kurze Identifikation und eine zusätzliche ausführliche Beschreibung der wichtigen Zusammenhänge.

Ein Foto eines Gebäudes kann beispielsweise lediglich der optischen Gestaltung dienen. Wird dasselbe Foto auf einer Anfahrtsseite verwendet, können erkennbare Merkmale des Eingangs für Besucher relevant sein. Ein pauschaler Alternativtext aus der Mediathek passt daher nicht zwangsläufig zu jeder Verwendung.

Automatisch aus Dateinamen erzeugte Angaben wie „bild-1234.webp“ oder „stockfoto-unternehmen-final“ sind keine sinnvollen Alternativtexte. Auch eine generische Bezeichnung wie „Foto“ vermittelt weder Inhalt noch Funktion.

Wie wird ein guter Alternativtext formuliert?

Ein guter Alternativtext ist so kurz wie möglich und so ausführlich wie nötig. Er beschreibt nicht jedes sichtbare Detail, sondern konzentriert sich auf die Information, die für das Verständnis der Seite wichtig ist. Als Orientierung hilft die Frage: Welche Aussage würde fehlen, wenn das Bild nicht angezeigt würde?

• Die wichtigste Information steht möglichst am Anfang des Alternativtextes.
• Die Beschreibung berücksichtigt den unmittelbar umgebenden Text und vermeidet unnötige Wiederholungen.
• Relevante Personen, Objekte, Zustände oder Handlungen werden eindeutig benannt.
• Unwichtige Farben, Hintergründe und gestalterische Einzelheiten werden weggelassen.
• Mehrdeutige Formulierungen und nicht nachvollziehbare interne Bezeichnungen werden vermieden.

Einleitende Wörter wie „Bild von“ oder „Foto von“ sind normalerweise nicht erforderlich, weil Screenreader das Element bereits als Bild erkennen. Die Art der Darstellung kann aber wichtig sein, wenn es sich beispielsweise um einen Screenshot, eine technische Zeichnung, eine Karte oder ein Diagramm handelt.

Alternativtexte sollten nicht mit Suchbegriffen überladen werden. Eine sachlich passende Bezeichnung kann zwar auch Suchmaschinen bei der Einordnung eines Bildes helfen, der primäre Zweck bleibt jedoch die verständliche Textalternative. Wiederholte Keywords, werbliche Zusätze oder Aufzählungen ähnlicher Begriffe verschlechtern die Nutzbarkeit.

Wie werden dekorative, funktionale und verlinkte Bilder behandelt?

Rein dekorative Bilder transportieren keine zusätzliche Information und besitzen keine Funktion. Werden sie mit einem normalen <img>-Element eingebunden, sollten sie ein leeres Alt-Attribut erhalten: alt="". Ein leeres Alt-Attribut ist nicht dasselbe wie ein vollständig fehlendes Attribut. Fehlt es, können Screenreader stattdessen den Dateinamen oder andere technisch ermittelte Angaben ausgeben. Die korrekte Behandlung erläutert das W3C in seinen Hinweisen zu dekorativen Bildern.

Bei Icons innerhalb beschrifteter Schaltflächen ist häufig kein zusätzlicher Alternativtext erforderlich, wenn die sichtbare Beschriftung den Zweck bereits vollständig vermittelt. Ein Briefumschlag neben dem Text „Kontakt aufnehmen“ würde sonst möglicherweise zu einer störenden doppelten Ausgabe führen.

Dient ein Bild selbst als Link oder Schaltfläche, muss dessen zugänglicher Name die Funktion beziehungsweise das Ziel beschreiben. Bei einem verlinkten Logo kann beispielsweise die Rückkehr zur Startseite entscheidend sein. Eine reine Beschreibung der Farben oder Formen des Logos würde den Zweck des Links nicht erklären.

Das Title-Attribut ist kein verlässlicher Ersatz für einen Alternativtext. Auch eine Bildunterschrift übernimmt diese Aufgabe nicht automatisch. Sie kann zusätzliche Informationen für alle Besucher bereitstellen, während der Alternativtext weiterhin die notwendige Bildaussage oder Funktion vermittelt.

Was gilt für Diagramme, Screenshots und Bilder mit Text?

Diagramme, Infografiken, Karten und umfangreiche Screenshots enthalten häufig mehr Informationen, als sinnvoll in ein einzelnes Alt-Attribut passen. Der Alternativtext sollte das Bild und seine zentrale Aussage kurz identifizieren. Die ausführlichen Daten, Zusammenhänge oder Handlungsschritte gehören in den angrenzenden Fließtext, eine Datentabelle oder eine gesonderte Langbeschreibung.

Bei einem Diagramm ist meistens nicht jede Farbe, Linie oder Achsenposition einzeln zu beschreiben. Wichtig sind die Aussage, relevante Werte und erkennbare Entwicklungen. Ein Screenshot einer Fehlermeldung sollte den Fehler und den für die Lösung entscheidenden Hinweis wiedergeben, anstatt die vollständige Bildschirmoberfläche aufzuzählen.

Enthält ein Bild wichtigen Text, muss dieser Inhalt ebenfalls zugänglich sein. Nach Möglichkeit sollte Text direkt als HTML-Inhalt bereitgestellt werden, damit er vergrößert, angepasst und von assistiver Technik verarbeitet werden kann. Bei Logos oder unvermeidbaren Schriftgrafiken muss der Alternativtext die relevante Bezeichnung oder Aussage wiedergeben.

Bei mehreren Produktansichten oder einer Bildergalerie sollte jede relevante Aufnahme anhand ihres Informationswertes unterschieden werden. Nahezu identische Vorschaubilder benötigen dagegen nicht automatisch jeweils eine wiederholte ausführliche Beschreibung.

Wie werden Alternativtexte im CMS richtig eingepflegt?

Content-Management-Systeme wie WordPress und Joomla! stellen normalerweise Felder für alternative Bildbeschreibungen bereit. Website-Betreiber sollten darauf achten, tatsächlich das Feld für den Alternativtext zu verwenden. Dateiname, Medientitel, Beschreibung und Bildunterschrift erfüllen unterschiedliche Aufgaben und werden nicht automatisch als Alt-Attribut ausgegeben.

Bei wiederverwendeten Bildern ist zu prüfen, ob ein zentral gespeicherter Alternativtext an allen Einsatzorten passt. Pagebuilder, Templates, Galerien und spezielle Module können eigene Felder besitzen oder die Angaben aus der Medienverwaltung überschreiben. Entscheidend ist daher nicht allein der Eintrag im Backend, sondern das Alt-Attribut im tatsächlich ausgelieferten HTML-Code.

Alternativtexte gehören zur redaktionellen Qualitätssicherung. Werden Seiten umgebaut, Bilder ersetzt oder Inhalte in einen anderen Zusammenhang verschoben, müssen auch die Textalternativen kontrolliert werden. Eine laufende professionelle Website-Inhaltspflege kann diese Prüfung bei regelmäßigen inhaltlichen Änderungen berücksichtigen.

Wie lässt sich die Qualität vorhandener Alternativtexte prüfen?

Eine Prüfung sollte unterschiedliche Seitentypen einbeziehen, beispielsweise Startseite, Leistungsseiten, Beiträge, Kontaktbereiche, Galerien und Formulare. Einzelne Stichproben in der Medienverwaltung reichen nicht aus, weil die konkrete Ausgabe vom verwendeten Modul oder Template abhängen kann.

1. Alle sichtbaren Bilder werden nach informativer, dekorativer, funktionaler oder komplexer Aufgabe eingeordnet.
2. Im ausgelieferten HTML wird kontrolliert, ob ein Alt-Attribut vorhanden und korrekt befüllt oder bewusst leer ist.
3. Die Seite wird gedanklich oder testweise ohne Bilder betrachtet, um fehlende Informationen zu erkennen.
4. Alternativtexte werden gemeinsam mit Überschriften, Beschriftungen und angrenzenden Texten auf unnötige Wiederholungen geprüft.
5. Verlinkte Bilder und grafische Bedienelemente werden auf verständliche Namen und eindeutige Ziele kontrolliert.
6. Komplexe Grafiken werden darauf geprüft, ob ihre wesentlichen Aussagen zusätzlich als zugänglicher Text verfügbar sind.

Automatisierte Prüfwerkzeuge können fehlende Alt-Attribute, verdächtige Dateinamen oder bestimmte strukturelle Probleme erkennen. Sie können jedoch nicht zuverlässig beurteilen, ob eine Beschreibung im jeweiligen Kontext sinnvoll ist. Dafür bleibt eine inhaltliche Prüfung erforderlich.

Nach Designänderungen, Template-Anpassungen oder größeren Inhaltsaktualisierungen sollte die Kontrolle wiederholt werden. Solche Funktions- und Qualitätsprüfungen lassen sich in eine regelmäßige Website-Wartung einbinden.

Welche rechtlichen Anforderungen gelten für Website-Betreiber?

Alternativtexte gehören zu den grundlegenden Anforderungen der WCAG. Ob und auf welcher Rechtsgrundlage eine konkrete Website zur barrierefreien Umsetzung verpflichtet ist, hängt jedoch unter anderem vom Betreiber, vom angebotenen Dienst, von der Zielgruppe und von möglichen Ausnahmen ab.

Für öffentliche Stellen bestehen besondere gesetzliche Vorgaben. Im privaten Bereich kann das seit dem 28. Juni 2025 anzuwendende Barrierefreiheitsstärkungsgesetz relevant sein, wenn über eine Website erfasste Dienstleistungen für Verbraucher angeboten werden, beispielsweise Dienstleistungen im elektronischen Geschäftsverkehr. Es gilt jedoch nicht pauschal für jede Unternehmenswebsite. Auch Ausnahmen, etwa für bestimmte Kleinstunternehmen bei Dienstleistungen, müssen berücksichtigt werden. Eine erste Einordnung bietet die FAQ der Bundesfachstelle Barrierefreiheit zum BFSG.

Unabhängig von einer unmittelbaren gesetzlichen Verpflichtung verbessern sinnvolle Alternativtexte die Zugänglichkeit und Verständlichkeit einer Website. Eine allgemeine Einordnung weiterer Anforderungen finden Sie im Ratgeberbeitrag Was müssen Website-Betreiber zur Barrierefreiheit wissen?. Dieser Beitrag ersetzt keine individuelle Rechtsberatung.

Einzelne eindeutig informative Bilder lassen sich häufig selbst bearbeiten. Eine umfassende Prüfung ist sinnvoll, wenn viele Templates, Galerien, Shopfunktionen oder grafische Bedienelemente vorhanden sind oder Unsicherheit über die richtige Einordnung besteht. Über die Anfrage zur Website-Barrierefreiheit können Sie eine technische und inhaltliche Prüfung abstimmen.

Weitere Ratgeber

Passende Beiträge zum Thema

Weitere Ratgeber, die zu diesem Thema passen und bei Wartung, Sicherheit, Updates oder Backups weiterhelfen.