So schreiben Sie barrierefreier alt-text bilder

Barrierefreier Alt-Text für Bilder ist entscheidend, um sicherzustellen, dass alle Nutzer, einschließlich Menschen mit Sehbehinderungen, den Inhalt verstehen können. Der Alt-Text sollte prägnant und beschreibend sein, dabei den Zweck des Bildes klar kommunizieren. Verwenden Sie konkrete Begriffe und vermeiden Sie allgemeine Ausdrücke wie „Bild von…“. Wenn das Bild funktional ist, wie ein Button, sollte der Alt-Text die Handlung beschreiben, die der Benutzer ausführen kann. Überprüfen Sie, ob der Alt-Text in den Kontext des Inhalts passt, um die Zugänglichkeit zu maximieren.

Wer digitale Inhalte veröffentlicht, darf ein zentrales Element der Zugänglichkeit nicht übersehen: den Alternativtext, kurz Alt-Text. Alt-Texte spielen eine entscheidende Rolle für die Barrierefreiheit. Menschen mit Blindheit oder starker Sehbeeinträchtigung sind auf Screenreader angewiesen. Diese Programme lesen nicht sichtbare Textelemente – wie Alt-Texte bei Bildern – vor. So erfahren Nutzer, was visuell dargestellt wird, auch wenn sie das Bild selbst nicht sehen können. Der Alt-Text macht Informationen zugänglich und sorgt dafür, dass wirklich alle Menschen, unabhängig von ihren Fähigkeiten, Inhalte erleben und verstehen können.

In Deutschland verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen und öffentliche Stellen dazu, digitale Inhalte barrierefrei zu gestalten. Spätestens ab 2025 gelten auch für viele private Anbieter von Produkten und Dienstleistungen verbindliche Vorgaben. Ein zentrales Element ist dabei die Bereitstellung von Alternativtexten für nicht-textuelle Elemente wie Bilder. Ohne korrekte Alt-Texte verstoßen Websites nicht nur gegen das Gesetz, sondern riskieren auch Abmahnungen oder Sanktionen. Auf unserer Service-Seite  bfsg  finden Sie alle Infos rund um diese Vorgaben und wie Sie Ihre Website gesetzeskonform machen.

Barrierefreier Alt-Text adressiert hauptsächlich Menschen mit Sehbehinderung, aber auch andere Nutzer profitieren: Wer bei schlechtem Empfang surft und Bilder nicht laden kann, erkennt durch den Alt-Text den Kontext. Suchmaschinen wiederum werten Alt-Texte als Hinweis, worum es bei einem Bild geht. Dadurch verbessert sich die Auffindbarkeit Ihrer Website, wie im ArtikelWas Ist SEO Warum Braucht Website SEObeschrieben. Barrierefreie Alt-Texte sind also ein Gewinn für Nutzererlebnis und Suchmaschinenoptimierung (SEO).

Ein Alternativtext, meist als „Alt-Text“ bezeichnet, ist eine kurze, beschreibende Textinformation, die das Wesentliche eines Bildes zusammenfasst. In HTML wird der Alt-Text imalt-Attribut eines-Tags hinterlegt. Wenn das Bild nicht angezeigt werden kann oder ein Screenreader genutzt wird, erscheint bzw. wird der Alt-Text ausgegeben.

Alt-Texte dienen zwei Hauptzwecken: Sie stellen sicher, dass der Inhalt und die Funktion eines Bildes auch ohne visuelle Wahrnehmung vermittelt werden. Und sie schaffen damit Gleichberechtigung beim Zugang zu Informationen für alle Nutzergruppen. Ein barrierefreier Alt-Text beschreibt nicht einfach, was auf dem Bild zu sehen ist, sondern gibt den informativen Mehrwert wieder, den das Bild im Kontext bietet.

Beginnen Sie beim Schreiben eines Alt-Texts stets mit der wichtigsten Information. Überlegen Sie: Was müsste ich einer Person am Telefon übermitteln, damit sie versteht, worum es auf dem Bild geht? Die zentrale Botschaft oder der wichigste Aspekt sollte am Anfang stehen.

Knappe, klare Formulierungen fördern die Benutzerfreundlichkeit. Empfohlen werden maximal 80 bis 125 Zeichen. Erläutern Sie das Bild, ohne abschweifend zu werden. Screenreader-Nutzer profitieren von kurzen und präzisen Beschreibungen, die das Wichtigste auf den Punkt bringen.

Der Alt-Text sollte sich an der Funktion und am Kontext des Bildes orientieren. Ein Foto, das im Text einen Prozess illustriert, muss anders beschrieben werden als ein dekoratives Stimmungsbild. Machen Sie sich klar: Was trägt das Bild zum Verständnis der Inhalte bei?

Nicht jedes Bild braucht einen beschreibenden Alt-Text. Dekorative Bilder – beispielsweise Muster, grafische Trennlinien oder rein optische Effekte – dienen weder der Navigation noch transportieren sie Informationen. Sie sollten mitalt=""gekennzeichnet sein. So ignorieren Screenreader das Bild und vermeiden unnötige Unterbrechungen für den Nutzer.

• Informative Bilder: bekommen einen aussagekräftigen, knappen Alt-Text
• Dekorative Bilder:alt=""

Oft findet man Alt-Texte wie „Bild von Frau am Strand“, „Logo“ oder gar Dateinamen wie „IMG_00123.jpg“. Solche Angaben sind redundant oder nicht hilfreich. Das Wort „Bild“ ist unnötig, da Screenreader bereits signalisieren, dass es sich um ein Bild handelt. Nennen Sie einfach und direkt, was relevant ist: „Frau mit Sonnenhut am Sandstrand berichtet in die Kamera.“

Rechtliche Hinweise wie Copyright-Informationen, Fotografen- oder Agenturnamen gehören nicht in den Alt-Text – sie liefern keinen Mehrwert für die Nutzererfahrung. Diese Daten können separat im Bildnachweis oder als Bildbeschreibung untergebracht werden.

Dekorative Bilder brauchen keinen Alt-Text. Ein leeres Alt-Attribut (alt="") sorgt dafür, dass Screenreader das Bild überspringen. Das erhöht die Lesefreundlichkeit für Nutzer mit Screenreader und reduziert Überflutung mit unnötigen Informationen.

Für einfache Grafiken reicht oft eine prägnante Zusammenfassung („Umsatzwachstum von 15 % im Jahr 2023“). Komplexe Diagramme mit vielen Angaben können allerdings einen längeren Begleittext im Fließtext oder perlongdescoder ARIA-Attribute erfordern. Der Alt-Text beschreibt dann das Kernergebnis, während Details in der Bildunterschrift stehen.

Manche Bildgruppen, wie etwa Galerien oder Symbolreihen, lassen sich durch eine zusammenfassende Beschreibung klären („Fünf farbige Icons, die die fünf Phasen des Projektmanagements symbolisieren“). Sie vermeiden so Doppelungen und ermöglichen dennoch Zugang zu den wesentlichen Informationen.

Bilder, die als Buttons oder Links verwendet werden, zum Beispiel ein Such-Icon oder ein Einkaufskorb, benötigen einen Funktionstext als Alt-Text. Beschreiben Sie nicht die Grafik, sondern den Zweck: „Website durchsuchen“, nicht „Lupensymbol“.

1. Entscheiden Sie, ob das Bild informativ, dekorativ oder funktional ist
2. Beschreiben Sie den Zweck in wenigen Worten
3. Verwenden Sie bei interaktiven Elementen Aktionstexte („Zum Warenkorb“, „Senden“)

Ein Alt-Text sollte immer in erster Linie barrierefrei sein, kann aber auch Schlagwörter enthalten, die für Suchmaschinen relevant sind. Damit helfen Sie nicht nur Menschen, sondern verbessern auch Ihre Sichtbarkeit online. Vermeiden Sie jedoch Keyword-Stuffing. Wie SEO-Inhalte generell funktionieren, zeigtWas Ist SEO Warum Braucht Website SEO.

Künstliche Intelligenz kann dabei helfen, automatisiert erste Vorschläge für Alt-Texte zu liefern. Doch Vorsicht: Oft sind die Beschreibungen oberflächlich und erfassen den Kontext nicht. Prüfen und optimieren Sie die Vorschläge immer manuell, um Barrierefreiheit und Aussagekraft zu garantieren.

Der Alt-Text wird im-Tag im HTML-Code eingefügt. Für alle wirklich informativen Bilder gehört hier ein sinnvoller Text hinein, für dekorative Bilder bleibt das Attribut leer.

Guter Alternativtext zeichnet sich dadurch aus, dass er relevante Informationen vermittelt, prägnant bleibt und sich an der Zielgruppe orientiert. Beispiel: Ein Bild zeigt einen Mann, der einen Laptop benutzt. Ein guter Alt-Text lautet: „Mann verwendet Laptop am Schreibtisch in hellem Büro“, nicht einfach nur „Mann“ oder „Laptop“.

Schlechter Alt-Text, wie „Bild_1234.jpg“ oder „Foto“ oder unnötige Zusätze wie „Bild zeigt…“ führen zu Frustration bei Nutzern mit Screenreader. Sie erhalten keinen Mehrwert und können Inhalte nicht nachvollziehen. Im schlimmsten Fall werden so wichtige Informationen gar nicht erst vermittelt.

Probieren Sie selbst aus: Finden Sie für folgende Beispielbilder einen passenden Alt-Text!

• Ein Gruppenfoto eines Projektteams vor einem Messestand
• Eine Infografik, die steigende Besucherzahlen im Jahresverlauf zeigt
• Ein Icon mit einem Einkaufswagen-Symbol auf einem Button

Trainieren Sie Ihre Fähigkeiten, indem Sie bewusst überlegen, welche Information für den jeweiligen Kontext entscheidend ist.

Die Verpflichtung zur digitalen Barrierefreiheit umfasst nicht nur öffentliche Stellen, sondern ab 2025 auch viele private Unternehmen. Dazu gehört das Bereitstellen von Alternativtexten für alle relevanten Bilder, wie imArtikel Barrierefreiheit Pflicht Deutschland 2025ausführlich erklärt. Wer sich frühzeitig informiert und handelt, vermeidet Rechtsrisiken und leistet einen entscheidenden Beitrag zu einer inklusiven digitalen Gesellschaft.

Eine Vielzahl an Ressourcen und Beratungsangeboten stehen bereit, um Webentwickler und Content-Teams bei der Umsetzung barrierefreier Bildstrukturen zu unterstützen. Neben Leitfäden, Checklisten und Tools gibt es spezialisierte Dienstleister, die Analyse und Umsetzung unterstützen. Die Service-Seite  bfsg  informiert über rechtliche Grundlagen, Beratungsleistungen und praxiserprobte Lösungen. Weitere praktische Tipps, wie Sie Barrierefreiheit schon bei der Gestaltung berücksichtigen, finden Sie im BeitragWarum ist Barrierefreiheit im Webdesign wichtigsowie im ArtikelHäufige Barrierefreiheitsprobleme deutscher Websites.

Barrierefreier Alt-Text ist ein zentrales Fundament für digitale Inklusion. Wer Bilder konsequent mit klaren, kontextbezogenen Alternativtexten versieht, öffnet seine Website für Millionen Menschen mit ganz unterschiedlichen Bedürfnissen. Und: Gute Alt-Texte unterstützen zugleich Suchmaschinen, verbessern das Ranking und schützen vor rechtlichen Stolpersteinen. Content Creators, Webentwickler und Redakteure tragen eine entscheidende Verantwortung: Mit wenig Aufwand lassen sich große Wirkungen erzielen – für echte Teilhabe und eine inklusive digitale Welt.

Fehlerquellen sind unter anderem unnötige Floskeln („Bild von…“), zu lange oder zu vage Texte, unklare Dateinamen im Alt-Attribut, urheberrechtliche Hinweise oder das Fehlen des Alt-Texts bei informativen Bildern. Setzen Sie bei dekorativen Bildern konsequentalt="", um die Nutzer nicht mit Irrelevantem zu stören.

Für komplexe Visualisierungen empfiehlt es sich, im Alt-Text eine kurze Zusammenfassung des Kernaussagens zu liefern („Jahresübersicht: Besucherzahlen steigen von 20.000 auf 50.000“). Vertiefende Details können im Fließtext, als Bildunterschrift oder perlongdesc-Attribut erläutert werden. So bleibt die Information übersichtlich und zugänglich.

Suchmaschinen verwenden Alt-Texte, um den Inhalt von Bildern zu interpretieren. Suchbegriffe im Alt-Text können Rankings verbessern – solange sie sinnvoll integriert werden und die Barrierefreiheit gewahrt bleibt. Wichtiger ist immer der Nutzen für Menschen, wie Sie im ArtikelWas Ist SEO Warum Braucht Website SEOnachlesen können.

Es existieren automatisierte Tools und KI-basierte Generatoren, die erste Vorschläge für Alt-Texte machen können. Diese können als Unterstützung dienen, doch sollte jeder Vorschlag kritisch geprüft und, wenn nötig, angepasst werden, um den Kontext zu erfassen und Barrierefreiheit zu garantieren.

Alt-Texte für soziale Medien sollten besonders prägnant und leicht verständlich sein, da User dort oft schnell durch Inhalte scrollen. Auch hier gilt: Der Alt-Text muss den Bildinhalt aussagekräftig zusammenfassen, auf Floskeln verzichten und den Kontext berücksichtigen. Die Plattform-spezifischen Eingabeoptionen (z.B. bei Instagram oder Twitter) sollten genutzt werden, um die Reichweite und Zugänglichkeit der Posts zu erhöhen.