Barrierefreie Alternativtexte schreiben: So geht´s!

von

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

Alternativtexte schreiben

  • 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.

Vermeidung typischer Fehler

  • 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.

Komplexe Bilder

  • 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.

Technische Umsetzung

  • 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.

Checkliste

  1. Inhaltliche Beschreibung:
    • 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.
  2. Länge und Prägnanz
    • 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.
  3. Relevante Details einfügen
    • 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.
  4. Fehlerquellen vermeiden
    • Verwende keine Dateinamen, Copyright-Informationen oder ähnliche Angaben im Alternativtext.
    • Der Alternativtext sollte direkt zur Bildbeschreibung übergehen, ohne überflüssige Einleitungen.
  5. Kontextuelle Anpassung
    • Ü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.
  6. Verständlichkeit prüfen
    • 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.
  7. Kontinuität und Konsistenz sicherstellen
    • Achte darauf, dass Alternativtexte innerhalb eines Projekts oder einer Seite konsistent gestaltet sind.
    • Überprüfe Alternativtexte regelmäßig auf Aktualität und Relevanz.
  8. Zusätzliche Schritte für komplexe Inhalte
    • 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.