Datenschutzhinweis

Diese Webseite nutzt externe Komponenten, wie z.B. Schriftarten, Karten, Videos oder Analysewerkzeuge, welche alle dazu genutzt werden können, Daten über Ihr Verhalten zu sammeln. Datenschutzinformationen

AlternativTexte

Bilder und Grafiken richtig und barrierefrei benennen

Der Alternatixtext muss dieselbe Funktion haben bzw. denselben Zweck erfüllen wie das Bild.

Der Alternativtext (oder auch alt-Text) macht den Inhalt und die Funktion von Bildern für blinde Menschen zugänglich, da er von assistiven Technologien, zum Beispiel einem Screenreader, vorgelesen werden kann. In fast allen Fällen können Alternativtexte kurz gehalten werden, es muss ganzer Satz sein. Entscheidend ist: Die Seite soll benutzbar sein, wenn Grafiken oder Bilder durch die entsprechenden Alternativtexte ersetzt sind.

Warum brauche ich einen Alternativtext?

Für blinde Benutzer oder für Benutzer von einfachen Textbrowsern sind Grafiken und Bilder nicht zugänglich. 

Die Textalternative tritt dann an die Stelle der Grafik, sie soll die Grafik ersetzen. Auch wenn Objekte (etwa Video-Dateien, Audio-Dateien oder Applets) nicht anzeigt werden können, sollen kurze beschreibende Alternativtexte dem Nutzer eine Identifikation der Inhalte ermöglichen.

Die Umsetzung folgt der Anforderung 1.1 der BITV (Für jeden Nicht-Text-Inhalt sind Alternativen in Textform bereitzustellen, die an die Bedürfnisse der Nutzerinnen und Nutzer angepasst werden können.)

Unterschiedliche Grafiken und Bilder

Informative Grafiken (u.a. Fotos)

Informative Grafiken vermitteln eine Bildaussage. Sie sind nicht verlinkt. Der Alternativtext der Grafik vermittelt den Inhalt des Bildes.

Auch Diagramme und Schaubilder sind informative Grafiken. Sie vermitteln in der Regel komplexere Informationen. Falls sie nur veranschaulichen, was im Kontext beschrieben wird, ist ein kurzer alt-Text ausreichend. Ist dies nicht der Fall, ist eine ausführlichere Beschreibung der Bildinhalte an anderer Stelle nötig. (Zum Beispiel in Form eines zusätzlichen barrierefreien Text-Dokuments oder einer weiteren HTML-Seite) 

Unser Tipp: Wenn Sie als Redakteur Bilder hochladen, achten Sie darauf, immer auch direkt den Alternativtexte zu vergeben. Diesen finden Sie in unserer Weblication®-Metadatenmaske als "Beschreibung" benannt. 

Ist in der Metadaten-Maske NUR der Titel (title-Attribut) gefüllt, so wird der Alternativtext 1:1 aus dem Titel übernommen. 

Achten Sie also darauf, Titel und Alternativtext sinnvoll und im besten Fall unterschiedlich zu vergeben. Das title-Attribut wird für ergänzende Informationen eingesetzt, die auch für Sehende relevant sind.

Ein Beispiel

Schulungssituation bei gotoMEDIA: Mitarbeiterin veranschaulicht eine Funktion mit einem Stift am Whiteboard

Alternativtext: alt="Schulungssituation bei gotoMEDIA: Mitarbeiterin veranschaulicht eine Funktion mit einem Stift am Whiteboard"

Verlinkte Grafiken

Verlinkte Grafiken haben eine Funktion: Sie dienen als Link und verweisen auf eine andere Seite. Der alt-Text der Grafik nennt dann das Linkziel. Dadurch weiß der Nutzer, wohin der Link führt. Ein typisches Beispiel sind verlinkte Teaserbilder, die auf einen Artikel verweisen. Im alt-Text steht dann der Artikelname. 

Grafiken können auch für Schaltflächen eingesetzt werden. Dann ist es wichtig, dass der Zweck des Bedienelements vermittelt wird, so dass der Nutzer weiß, welche Aktion er ausführt. Die Textalternative eines Buttons mit einem Play-Symbol sollte z.B. „Abspielen“ lauten.

In der Regel binden wir als Ihre Agentur die verlinkten Grafiken auf Ihrer Seite ein. Ist das der Fall, kümmern wir uns um das sinnvolle Füllen der Alternativtexte. 

Unser Tipp: Wenn Sie als Redakteur die Option der Verlinkung eines Bildes nutzen oder eine andere Grafik einbauen, müssen Sie auf die korrekte, ggf. angepasste Benennung des Title / Alternativtext im Bildelement achten. 

Ein Beispiel

Cover des Magazins "Lorem Ipsum" für das Jahr 2020

Eigentlicher Alternativtext des Bildes - wäre es eine informative Grafik: alt="Cover des Magazins "Lorem Ipsum" für das Jahr 2020"

Alternativtext des Bildes, wenn es als verlinkte Grafik dient, welche die Broschüre öffnet: alt="Magazin "Lorem Ipsum" für das Jahr 2020 als e-Paper öffnen" (Bitte vergessen Sie hierbei nicht, dass sich der Link in einem neuen Fenster oder einer Lightbox öffnen soll.) 

Auf einen Blick

  • Grafiken, die einer Information dienen:
    Der Alternativtext vermittelt den Inhalt des Bildes: (alt=“Beschreibung des Bildinhalts“)
  • Grafiken, die als Link dienen:
    Der Alternativtext gibt das Linkziel wieder (alt=“Linkziel“).
  • Grafiken, die eine Aktion auslösen:
    Der Alternativtext gibt die Aktion wieder (alt=“Aktion“).

Weitere Tipps

  • Stellen Sie sich immer vor, dass Sie Jemandem so kurz aber genau wie möglich beschreiben müssen, was auf dem Bild zu sehen ist, oder was passiert, wenn darauf geklickt wird. 
  • Zusätze wie "Das Bild zeigt..." können Sie weg lassen.
  • Die Ausführlichkeit eines Alternativtexts ist stets von der Relevanz der Grafik abhängig. Wie relevant eine Grafik ist, hängt aber immer vom Kontext ab.
  • Die Information, dass es sich um eine Grafik oder um einen Grafik-Link handelt, muss nicht im Alternativtext stehen. 
  • Copyright-Informationen oder der Name des Fotografen bzw. Urheberrechte am Foto haben nichts im Alternativtext zu suchen. Das gehört bei Bedarf in den Title. 
  • Häufig werden das alt- und das title-Attribut verwechselt. Das title-Attribut wird für ergänzende Informationen eingesetzt, die auch für Sehende relevant sind.

Wir freuen uns, bald von Ihnen zu hören

gotoMEDIA  |  Spielplatzstraße 19  |  33129 Delbrück  |  Telefon +49 (0) 52 50 / 70 85 - 700  |  E-Mail nfgtmdd

gotoMEDIA
Spielplatzstraße 19
33129 Delbrück
Telefon +49 (0) 52 50 / 70 85 - 700
E-Mail nfgtmdd