Ich schreibe gerne Texte und freue mich über jeden, der sie liest. Damit meine Artikel aber auch von möglichst vielen Menschen gefunden und vor allem auch genutzt werden können, muss ich mich immer mal wieder mit den technischen Aspekten meiner Webseite beschäftigen.
Ein Thema, das dabei immer wieder eine Rolle spielt und aktuell wichtiger denn je ist, sind die Alt-Texte für Bilder. Diese sind nicht nur für die Suchmaschinenoptimierung und Barrierefreiheit relevant, sondern bekommen durch neue KI-Tools noch mal eine neue Bedeutung.
Was es damit auf sich hat und wie KI dabei helfen kann, darum soll es in diesem Artikel gehen.
Was sind Alt-Texte? Und warum dachten viele dabei bisher nur an SEO?
Ein Alternativtext, kurz Alt-Text, ist im Grunde eine kurze Beschreibung dessen, was auf einem Bild zu sehen ist. Bei Webseiten wird dieser Text im HTML-Code hinterlegt und ist erst einmal nicht direkt sichtbar. Grundsätzlich dienen Alt-Texte der Barrierefreiheit von Webseiten. Sie werden angezeigt, wenn Bilder nicht geladen werden können oder ermöglichen es Nutzern mit Sehbehinderungen mittels Screenreader, den Inhalt und Kontext eines Bildes zu erfassen.
Soweit die Theorie und der eigentliche Kern des Ganzen. In der Praxis war aber oft ein anderes Thema Treiber für die Erstellung und Pflege von Alt-Texten: SEO. Die Suchmaschinenoptimierung war für viele der Hauptantrieb, denn auch Google & Co. können Bilder nicht sehen. Ein gut formulierter Alt-Text hilft den Suchmaschinen also zu verstehen, was auf dem Bild zu sehen ist, kann relevante Keywords enthalten und so die Sichtbarkeit in der Bildersuche und manchmal auch das Ranking der gesamten Seite positiv beeinflussen. Die Barrierefreiheit war da oft eher ein willkommener Nebeneffekt als der primäre Fokus.
Barrierefreiheit und das BFSG: Die entscheidende Rolle von Alt-Texten
Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 28. Juni 2025 rückt die Notwendigkeit barrierefreier Webseiten stärker in den Fokus. Das Gesetz fordert eine inklusive Gestaltung digitaler Dienste. Ein Schlüsselelement dabei ist der Umgang mit visuellen Inhalten. Bilder müssen für alle Nutzergruppen verständlich sein, auch für jene, die sie nicht visuell erfassen können.
Für die vom BFSG betroffenen Dienste und Produkte bedeutet das: Alt-Texte sind nicht länger optional, sondern eine wesentliche Voraussetzung, um die Anforderungen an eine barrierefreie Webseite zu erfüllen.
KI und Alt-Texte: Was hat die Künstliche Intelligenz von meinen Bildbeschreibungen?
Wie sollte es auch anders sein, natürlich hat auch das Thema Künstliche Intelligenz einen Berührungspunkt mit Alt-Texten. Denn viele KI-Modelle, besonders solche, die Bilder verstehen oder sogar selbst generieren sollen, lernen anhand riesiger Datenmengen. Und qualitativ hochwertige Bild-Text-Paarungen, also ein Bild und sein passender Alt-Text, sind da besonders wertvoll.
Indem KI diese Verbindungen analysieren, lernen sie, Muster zu erkennen, Objekte zu identifizieren und den Kontext von Bildern zu begreifen. Das ist die Grundlage für immer bessere Bilderkennungssoftware, präzisere Suchergebnisse in multimodalen Suchen (also Suchen, die Text und Bild kombinieren) und sogar für KI-Tools, die selbstständig Bildbeschreibungen erstellen können.
Warum ist es interessant, als Webseitenbetreiber einer KI zu helfen?
Wenn die eigenen Bilder durch gute Alt-Texte für KI gut verständlich sind, steigt die Chance, dass die Inhalte auch in neuen, KI-gestützten Anwendungen und Suchfunktionen korrekt interpretiert und prominent ausgespielt werden.
Alt-Texte erstellen mit Google Gemini
Alternative Texte haben also einen großen Nutzen – sie zu schreiben, macht deswegen aber nicht mehr Spaß. Könnte nicht Gemini die Alt-Texte für mich erstellen?
Mit der Bilderkennung von Gemini hatte ich schon beim Bugfixing Berührungspunkte und die Ergebnisse waren sehr durchwachsen. Mal war ich beeindruckt, was Gemini auf dem hochgeladenen Bild alles erkennt, ein anderes Mal kam mir die Analyse eher vor wie reine Fantasie.
Da sich Gemini aber rasend schnell weiterentwickelt, starte ich einen neuen Versuch.
“Hallo! Ich benötige deine Hilfe bei der Erstellung von Alt-Texten für verschiedene Bilder. Ich habe in der Vergangenheit sehr gute Erfahrungen mit einem bestimmten Format und Fokus bei den Vorschlägen gemacht und würde das gerne beibehalten.
Für jedes Bild, das ich dir zeige, erstelle bitte drei verschiedene Alt-Text-Varianten. Jede Variante soll einen spezifischen Fokus haben.
Die erste Variante sollte detailliert und umfassend sein. Sie soll eine sehr genaue Beschreibung aller wichtigen visuellen Elemente, Texte und der Gesamtanmutung des Bildes enthalten. Bei Screenshots von Apps oder Software erwarte ich eine genaue Benennung von UI-Elementen, sichtbaren Werten, Menüs und deren Funktion im Kontext. Bei Code-Screenshots bitte die Programmiersprache (falls erkennbar), wichtige Strukturen, Kommentare und den Zweck des gezeigten Codeabschnitts erwähnen.
Die zweite Variante soll den Fokus auf die Kernaussage, den Zweck oder die Funktion des Bildes legen. Diese Variante soll stärker die Hauptbotschaft oder die dargestellte Funktionalität in den Vordergrund stellen. Dabei sollten auch Hinweise aus dem Dateinamen (falls relevant) oder von mir explizit genannte Kontextinformationen zum Bild einfließen. Bei Illustrationen bitte den Stil und die Symbolik beschreiben.
Die dritte Variante soll kompakt und zusammenfassend sein. Sie soll eine kurze, prägnante Zusammenfassung der wichtigsten Bildinhalte und der Hauptaussage bieten.
Als generelle Richtlinien für alle Alt-Texte gilt: Die Sprache sollte klar und präzise sein. Achte bitte stets darauf, dass der Alt-Text für jemanden nützlich ist, der das Bild nicht sehen kann.
Formatierung der Vorschläge: Bitte präsentiere mir die drei Alt-Text-Optionen so: Beginne jede Option mit einer fettgedruckten Überschrift, die die Optionsnummer und ihren Fokus nennt (z.B. “Option 1 (Detailliert):”). Der eigentliche Alt-Text-Vorschlag soll dann als separater, abgesetzter Textblock direkt darunter folgen.
Ich werde dir die Bilder einzeln zukommen lassen. Wenn du Fragen zum Kontext eines Bildes hast oder etwas unklar ist, frage bitte nach, bevor du die Vorschläge erstellst.
Beginnen wir mit dem ersten Bild, sobald du bereit bist.”
Dieser Prompt liest sich beeindruckend, war aber natürlich nicht meine erste Nachricht an Gemini mit meinem Anliegen. Als ich meine erste Nachricht in einem neuen Chat wiederholt hatte, stellte ich fest, dass sie gänzlich andere, enttäuschende Ergebnisse lieferte. Also habe ich Gemini einfach gefragt, was man schreiben muss, um die Ursprungsergebnisse zu bekommen.
Es ist übrigens sehr absurd, mit einer KI darüber zu diskutieren, wie eine Nachricht an sie formuliert sein muss, die mir die Ergebnisse liefert, die die KI anfangs von sich aus ohne konkrete Anweisungen lieferte.
Der Prompt oben liefert nun aber folgendes Ergebnis:
Okay, hier sind die drei Alt-Text-Vorschläge für das Bild “Projekttagebuch-2.webp”:
Option 1 (Detailliert):
Screenshot einer Webanwendung, die ein Projekttagebuch darstellt. Im oberen Bereich befindet sich ein dunkler Fenstertitelbalken mit macOS-typischen Steuerelementen (rot, gelb, grün). Darunter ist die Hauptnavigationsleiste der Anwendung zu sehen: links ein Eingabefeld mit dem Platzhaltertext “Lorem ipsum dolor”, daneben ein Dropdown-Pfeil-Symbol, ein Glocken-Symbol für Benachrichtigungen und ein Personen-Icon für das Nutzerprofil. Rechts in dieser Leiste ist ein dunkler Button mit der Aufschrift “Neuer Eintrag”. Unterhalb der Navigation befindet sich eine Filterleiste mit einem Suchfeld (“Suchen…”) und daneben angeordneten Filter-Tags: “technical” (hellblau), “design” (rosa), “Prio: High” (rot), “Prio: Medium” (orange), “Prio: Low” (grün), “Milestone” (dunkelblau) und “XY” (grau). Der Hauptbereich zeigt eine Liste von Tagebucheinträgen. Der oberste Eintrag hat den Titel “Lorem ipsum dolor sit amet, consetetur sadipscing elitr”, das Datum “19.06.2024 – 14:55 Uhr” und den Autor “Monica Hall”. Der Inhalt besteht aus Platzhaltertext (“Lorem ipsum dolor sit amet…”). Darunter sind die Tags “technical”, “Milestone”, “XY” und “Prio: Medium” sowie ein Anhang “Lorem-ipsum-dolor.pdf” mit PDF-Icon zu sehen. Am Ende des Eintrags steht “Richard Hendricks, Ehrlich Bachman und Monica Hall haben diesen Post gelesen” neben einem Häkchen-Symbol und dem Wort “Gelesen”. Rechts neben diesem Eintrag steht das Datum “19.06.”. Ein weiterer, älterer Eintrag vom “17.06.” mit dem Titel “Lorem ipsum dolor sit amet” von “Ehrlich Bachman” ist darunter teilweise sichtbar. Eine Scrollbar am rechten Rand deutet auf weitere Inhalte hin. Das Design ist hell und modern.
Option 2 (Fokus auf die Kernaussage, den Zweck oder die Funktion):
Die Abbildung zeigt die Benutzeroberfläche eines digitalen Projekttagebuchs namens “Projekttagebuch-2”. Dargestellt ist eine Liste von Einträgen, die den Fortschritt und wichtige Ereignisse eines Projekts dokumentieren. Nutzer können neue Einträge erstellen (“Neuer Eintrag”-Button), bestehende Einträge einsehen – inklusive Titel, Autor, Datum, Inhalt, Tags (wie “technical”, “design”, “Milestone”, Prioritäten) und Anhängen (z.B. PDF-Dateien). Eine Such- und Filterfunktion ermöglicht das schnelle Auffinden spezifischer Informationen anhand von Stichworten oder vordefinierten Kategorien. Die Software zeigt auch an, welche Teammitglieder einen Beitrag bereits gelesen haben, was die Kollaboration unterstützt. Der Screenshot illustriert somit die typische Ansicht und Kernfunktionalitäten eines Tools zur Projektverfolgung und -dokumentation.
Option 3 (Kompakt und zusammenfassend):
Screenshot der Benutzeroberfläche eines Projekttagebuchs mit einer Liste von Einträgen. Jeder Eintrag zeigt Titel, Datum, Autor, Text, Tags und Anhänge. Filteroptionen und eine Funktion zum Erstellen neuer Einträge sind ebenfalls sichtbar.
Ich habe also drei mögliche Alt-Texte, von denen ich mir je nach Kontext den passenden aussuchen kann. Und ich muss sagen: teilweise ist es wirklich beeindruckend, welche Tiefe die Vorschläge mitunter haben. Ich liefere nur ein Bild und die Interpretation entspricht ziemlich genau dem, was ich mit dem Bild aussagen möchte.
Okay, hier sind Vorschläge für den Alt-Text zu dieser Illustration:
Option 1 (Beschreibend):
Illustration: Eine Person klettert einen dunklen Berg hinauf, dessen Basis mit unzähligen Zigarettenstummeln bedeckt ist. Auf dem Gipfel des Berges thront eine leuchtend goldene, gesunde Lunge, angestrahlt von einem Lichtstrahl.
Option 2 (Mit Interpretation):
Symbolische Darstellung der Raucherentwöhnung: Eine Figur erklimmt mühsam einen Berg aus Zigarettenstummeln, als Metapher für die Schwierigkeit des Aufhörens. Das Ziel auf dem Gipfel ist eine strahlend gesunde, goldene Lunge.
Option 3 (Kürzer, Fokus auf Metapher):
Metaphorische Illustration: Der Kampf des Rauchstopps als Aufstieg auf einen Berg aus Zigarettenstummeln hin zu einer gesunden, goldenen Lunge als Belohnung.
Wähle den Text, der die Aussage des Bildes am besten im jeweiligen Kontext transportiert.
Alles perfekt, oder?
Natürlich läuft es nicht immer reibungslos. Manchmal sind die Fehltritte noch harmlos und ich frage mich nur, wie Gemini in einen Screenshot etwas hineininterpretieren konnte. Warum z.B. weiß Gemini, dass der folgende Screenshot in Figma gemacht wurde und warum behauptet es, dass links ein Ebenen-Panel und rechts ein Eigenschaften-Panel zu sehen ist?
Option 1 (Detailliert, mit Beschreibung der einzelnen Elemente):
Screenshot der Figma-Designoberfläche im Dark Mode, die die Erstellung von App Store Bildern für die “StreakFree”-App zeigt. Auf der Arbeitsfläche sind vier Artboards mit unterschiedlichen Designs sichtbar: Das erste zeigt den App-Startbildschirm mit dem Text “Es beginnt mit EINEM Nein zur nächsten Zigarette.”… Links ist das Ebenen-Panel von Figma zu sehen, rechts das Eigenschaften-Panel.
Option 2 (Fokus auf den Designprozess und Inhalt):
Arbeitsbereich in Figma, der den Designprozess von vier verschiedenen Werbebildern für die “StreakFree”-App im App Store illustriert… Die Figma-Benutzeroberfläche mit Werkzeugen und Panels umgibt die Design-Artboards.
Und dann gibt es noch Vorschläge, die wirklich komplett daneben sind. Hier scheint sich Gemini aus anderen Sitzungen bedient zu haben und einfach irgendetwas hineininterpretiert zu haben.
Gerne, hier sind einige Vorschläge für den Alt-Text zu diesem Bild, das eine Benachrichtigung vom Apple App Store Review zeigt:
Option 1 (Detailliert):
Screenshot einer Benachrichtigung von “App Store Review”, datiert “Today at 1:57 AM”. Die Nachricht bezieht sich auf die App “AntiSmoke” (Version 1.0), deren Icon (eine stilisierte weiße “1” auf dunklem Grund) angezeigt wird. Ein großes grünes Häkchen und der Status “Ready for Sale” signalisieren die Genehmigung. Der englische Text lautet: “Congratulations! The following app has been approved and the status has changed to Ready for Sale.” Ein Link zur Ansicht der App im App Store wird ebenfalls angeboten.
Option 2 (Fokus auf die Kernaussage – Genehmigung):
Offizielle Mitteilung von Apple App Store Review: Die App “AntiSmoke”, Version 1.0, wurde genehmigt und ist nun im App Store “Ready for Sale”. Der Screenshot zeigt die Bestätigungsnachricht mit dem App-Icon, einem grünen Häkchen und dem Glückwunschtext.
Option 3 (Kompakt):
Benachrichtigung vom App Store Review: Die App “AntiSmoke” (Version 1.0) wurde genehmigt und hat den Status “Ready for Sale” erreicht. Der Screenshot zeigt die Bestätigungsnachricht von Apple.
Mein Fazit ist dennoch positiv. Natürlich sind die gelieferten Vorschläge mit Vorsicht zu genießen, aber die Zeitersparnis bleibt enorm. Ich bekomme in kürzester Zeit sinnvolle Alt-Texte, und wenn etwas nicht stimmt, kann ich sie im Gespräch mit Gemini anpassen lassen.
Artikel teilen
Last modified: Juni 5, 2025
