Barrierefreie Alternativtexte schreiben: So geht´s!

Dieser Text kann auch als PDF Datei heruntergeladen werden.

Schlechter Alternativtext: Picture1.jpg – Vase mit Blume und Katze

Guter Alternativtext: Eine grauhaarige Katze sitzt auf einem Tisch neben einer Vase mit leuchtend pinken Pfingstrosen. Die Katze blickt aufmerksam in die Kamera, während das Licht durch das Fenster danebenfällt

• Beschreibe den Inhalt des Bildes: Was ist auf dem Bild zu sehen?
  Welche Information vermittelt es?
• Wichtiges zuerst: Beginne den Alternativtext mit den wichtigsten
  Informationen.
• Kontext berücksichtigen: Überlege, wie das Bild im Kontext des
  gesamten Textes oder der Seite verwendet wird.
• Kurz und prägnant: Wir empfehlen höchstens 80 Zeichen, da das
  die maximale Textlänge ist, die beim Navigieren mit einer Braillezeile
  auf einmal wahrnehmbar ist.
• Relevant: Der Alternativtext sollte den Zweck des Bildes in Bezug auf
  den gesamten Inhalt beschreiben.

• Keine Dateinamen als Alternativtext: Verwende nicht den Dateinamen des Bildes als Alternativtext (z. B. „bild123.jpg“).
• Vermeide unnötige Worte: Es ist nicht notwendig, „Bild von...“ oder
  „Foto von...“ zu schreiben, da Screenreader dies bereits vermitteln.
• Zusatzinformationen, wie z. B. Angaben zum Urheberrecht sind nicht
  Bestandteil eines Alternativtextes.
• Vermeide Redundanzen: Wenn das Bild nur dekorativ ist und keine
  zusätzliche Information bietet, sollte es ebenso gekennzeichnet werden

• Diagramme und Grafiken: Gib eine kurze Zusammenfassung als Alternativtext und
  biete zusätzlich eine ausführlichere Beschreibung im Text oder
  in einer separaten Datei an.
• Gruppierte Bilder: Bei mehreren zusammenhängenden Bildern, die
  eine Geschichte erzählen, kann der Alternativtext die Bildreihe im
  Kontext beschreiben.

• HTML: Verwende das alt-Attribut innerhalb des img-Tags, z. B.
  ;img src="bild.jpg" alt="Beschreibung des Bildes">. Alternativtexte
  werden über das „alt“ Attribut gesetzt. Ein leeres „alt“ Attribut (alt="") markiert die Grafik als dekorativ, sodass diese von assistiven Technologien
  nicht mehr ausgegeben wird.
• Content-Management-Systeme (CMS): Die meisten CMS (z. B. WordPress,
  Drupal) bieten eine einfache Möglichkeit, Alternativtexte beim Hochladen
  von Bildern hinzuzufügen.
• Social Media: Plattformen wie LinkedIn, Twitter und Facebook bieten
  spezielle Felder zum Hinzufügen von Alternativtexten beim Posten von
  Bildern an.

• Schreibe einen Alternativtext, der die wesentlichen visuellen Elemente des Bildes beschreibt.
• Achte darauf, dass der Alternativtext die wesentliche Botschaft oder den Zweck des Bildes vermittelt.
• Beschränke dich auf die wichtigen Details, die für das Verständnis notwendig sind.

• Formuliere den Alternativtext so kurz wie möglich, ohne wichtige Informationen auszulassen. (max. 80 Zeichen)
• Verwende vollständige Sätze, wenn sie die Verständlichkeit verbessern, aber sei nicht zu langatmig.

• Stelle sicher, dass wichtige Details, die für den Inhalt relevant sind, im Alternativtext enthalten sind.
• Verzichte auf Informationen, die für das Verständnis des Bildes nicht notwendig sind.

• Verwende keine Dateinamen, Copyright-Informationen oder ähnliche Angaben im Alternativtext.
• Der Alternativtext sollte direkt zur Bildbeschreibung übergehen, ohne überflüssige Einleitungen.

• Überlege, ob der Alternativtext für den spezifischen Kontext (z. B. Blog, Social Media) geeignet ist.
• Bei rein dekorativen Bildern ein leeres Alt-Attribut (alt="") verwenden, um den Alternativtext zu überspringen.

• Lies den Alternativtext laut vor, um sicherzustellen, dass er verständlich und sinnvoll ist.
• Überprüfe den Alternativtext mit einem Screenreader, um seine Nutzbarkeit für Menschen mit Sehbehinderungen zu testen.

• Achte darauf, dass Alternativtexte innerhalb eines Projekts oder einer Seite konsistent gestaltet sind.
• Überprüfe Alternativtexte regelmäßig auf Aktualität und Relevanz.

• Erstelle für komplexe Grafiken eine kurze, prägnante Zusammenfassung im Alternativtext und verweise auf detailliertere Beschreibungen im Text.
• Wenn das Bild verlinkt ist, sollte der Alternativtext den Zweck des Links oder die Zielseite beschreiben.

Informationen zu diesem Artikel

Verfasst von:

Team BFIT

Datum:

18.02.2026

Lizenz:

CC-BY-SA 4.0

Version:

1.0

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!