Barrierefreiheit: Bessere Alt-Texte für Bilder mit ChatGPT

Zuletzt aktualisiert am 30.09.2024 von Martin Harnisch

Farbiges Bild des ChatGPT-Logos mit Text. In der Mitte ist das grüne ChatGPT-Logo zu sehen, das aus einem abstrakten, verschlungenen Muster besteht. Unter dem Logo steht in lila Schrift "Alternativtexte" und darunter in schwarzer Schrift "mit ChatGPT". Das Bild hat einen lila Rahmen.
Lesedauer 2 Minuten

Ein LinkedIn-Post von Raul Krauthausen, einem Aktivisten für Inklusion und Barrierefreiheit, hat mich erneut dazu veranlasst, mich mit dem Thema Barrierefreiheit in meinem Blog, insbesondere im Hinblick auf Alternativtexte, auseinanderzusetzen.

Ein Alternativtext (auch Alt-Text oder Alt-Tag genannt) ist eine kurze Textbeschreibung, die einer Bilddatei auf einer Webseite oder in einem digitalen Dokument zugeordnet wird. Er dient dazu, den Inhalt des Bildes für Menschen mit Sehbehinderungen oder in Situationen, in denen das Bild nicht geladen werden kann, zugänglich zu machen.

In dem Beitrag gibt Raul fünf Tipps, für bessere Alternativtexte:

  1. Bild einordnen: Um welche Art von Bild handelt es sich? Ein farbiges Foto, eine Info-Grafik oder eine Zeichnung?
  2. Beschreiben: Was ist auf dem Bild zu sehen? Beschreibe es so, als würdest du es jemandem am Telefon beschreiben.
  3. Sprache: Achte auf eine einfache Sprache und verzichte auf Fremdwörter.
  4. Meinung: Behalte deine eigene Meinung zum Abgebildeten für dich.
  5. Text: Ist auf dem Bild Text zu sehen, schreibe ihn als Zitat dazu.

Da ich bereits mehr als 70 Bilder in meinem Blog verwende und diese gerne entsprechend beschreiben wollte, kam mir die Idee, die Erstellung der Alternativtexte mit ChatGPT zu versuchen. Die Ergebnisse waren definitiv besser als alles, was ich mir hätte ausdenken können.

Hier der initiale Prompt an ChatGPT (ich habe “ChatGPT 4o” verwendet):

Ich werde dir nach und nach Bilder aus meinem Blog zeigen und möchte, dass du für jedes Bild einen Alternativtext erstellst. Bitte beachte dabei die folgenden 5 Tipps:

  1. Bild einordnen: Um welche Art von Bild handelt es sich? Ein farbiges Foto, eine Info-Grafik oder eine Zeichnung?
  2. Beschreiben: Was ist auf dem Bild zu sehen? Beschreibe es so, als würdest du es jemandem am Telefon beschreiben.
  3. Sprache: Achte auf eine einfache Sprache und verzichte auf Fremdwörter.
  4. Meinung: Behalte deine eigene Meinung zum Abgebildeten für dich.
  5. Text: Ist auf dem Bild Text zu sehen, schreibe ihn als Zitat dazu.

Bitte verwende diese Richtlinien, um präzise und hilfreiche Alternativtexte zu erstellen.

Im Folgenden habe ich dann nacheinander die Bilder hochgeladen. Hier zwei Beispiele:

Das Bild zeigt eine Benutzeroberfläche von ChatGPT. Oben ist ein Bild, welches als Input dient und Text enthält. Darunter befindet sich der von ChatGPT generierte Alternativtext, der das Bild beschreibt: "Screenshot eines Textabschnitts in niederländischer Sprache. Das Wort 'NORA' ist im Text hervorgehoben und mit einem Tooltip versehen, der bei Hover erscheint. Der Tooltip zeigt die vollständige Bedeutung von 'NORA' als 'Nederlandse Overheid Referentie Architectuur'."
Das Bild findet sich in dem Artikel Nützliche MediaWiki-Erweiterungen wieder.
Screenshot einer ChatGPT-Konversation. Auf der rechten Seite ist ein Input-Bild zu sehen. Unter diesem Bild ist die Antwort von ChatGPT zu sehen, die den Inhalt des Bildes beschreibt. Der Text der Antwort lautet: "Das Bild zeigt eine Nahaufnahme von Computertasten, die in roten und grünen Tönen beleuchtet sind. Im Vordergrund befindet sich ein geöffnetes Vorhängeschloss. Darüber liegt der Text 'Known Worries in der Debatte um Restriktionen in Enterprise Wikis'. Der Text ist in weißer Schrift auf dem Bild platziert."
Das Bild ist das Titelbild des Artikels Known Worries in der Debatte um Restrik­tionen in Enterprise Wikis.

Gelegentlich musste ich etwas Kontext liefern, um mit dem Ergebnis zufrieden zu sein, aber in 80% der Fälle konnte ich die Texte direkt verwenden.

Ich wünsche viel Spaß beim Ausprobieren!

Schlagwörter:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert