Korrekte Bildalternativen erstellen

Ein zentrales Element in der barrierefreien Webgestaltung stellt der Umgang mit Bildern und Grafiken dar. Jedes visuelle Element, welches Informationen transportiert, muss eine alternative Textbeschreibung bereit stellen, um als barrierefrei zu gelten.

Bild der Drupalfunktion "Bild einfügen". Die Felder Beschreibung und Titel sind hervorgehoben.Um ein Bild auf einer Webseite mit Textinformationen zu versehen, gibt es im Web zwei einfache Möglichkeiten, das "Alt-Tag" (in Drupal als "Beschreibungsfeld" benannt) und das "Title-Tag" (in Drupal "Titel"). Beim Einfügen oder Ändern eines Bildes in Drupal, besteht die Möglichkeit diese Tags zu füllen. Beide Felder sollten stets ausgefüllt sein.

Beschreibung ("Alt-Tag")

Für die Barrierefreiheit eines Bildes ist das Feld "Beschreibung" von größter Bedeutung. Der hier eingetragende Text wird in dem Fall genutzt, wenn das entsprechende Bild nicht dargestellt oder wahrgenommen werden kann. Dies kann zum einen technische Ursachen haben (Bild kann im Moment nicht geladen werden) oder durch Einschränkungen der Nutzer (Nutzung assistiver Techniken) eintreten.

In einem solchen Falle muss der Beschreibungstext so gewählt sein, dass er alle relevanten Informationen, welche das Bild eigentlich repräsentieren würde, ebenfalls enthält. Um einen guten Beschreibungstext zu finden ist es hilfreich sich selbst folgende Fragen zu stellen:

  • Was möchte ich durch den Einsatz des Bildes beim Leser eigentlich erreichen?
  • Was sind relevante Elemente des Bildes und was nur "Beiwerk"?
  • Welche Informationen würde ich verlieren, wenn ich das Bild weglassen würde?
Es kann vorkommen, dass Grafiken keinen eigentlichen Informationsgehalt haben und nur zur visuellen Gestaltung der Webseite genutzt werden. In diesem Falle kann die Grafik den Beschreibungstext "Schmuckgrafik" erhalten, oder auch gar keine Beschreibung.

Beinhaltet das Bild Informationen in Textform, so sind diese in jedem Fall im Beschreibungstext noch einmal mit einzuarbeiten.

Hinweis: Gestalten Sie Beschreibungstexte nicht unnötig lang und konzentrieren Sie sich auf die wesentlichen Aussagen des Bildes. Beispielsweise der Beschreibungstext: "Student präsentiert rotes Elektroauto", beinhaltet die überflüssige Information der Farbe des Autos. Die Farbe ist in diesem Beispiel irrelevant, da sie selbst keine Information vermittelt. Auch können von Geburt an Sehgeschädigte zumeist mit Farbangaben nichts anfangen.

Bildtitel ("Title-Tag")

Der Bildtitel erscheint immer dann, wenn man mit dem Mauszeiger über das entsprechende Grafikelement fährt. Der dann angezeigte Textlayer wird auch als "Tooltip" bezeichnet. Im verwendeten Drupalsystem wird der Bildtitel als Bildunterschrift verwendet, wenn eine Bildunterschrift gewünscht ist.

Grundlegender Unterschied zum Beschreibungstext besteht darin, dass der Titel zusätzliche Informationen zum Bild enthält. Der Titel sollte kurz und treffend gewählt werden. Zusätzliche Informationen können beispielsweiße Copyrightinformationen, Namen von abgebildeten Personen, oder Zweck des Bildes sein (z.B. wenn das Bild als Link zu einem Artikel oder Blogeintrag genutzt wird).

Beispiele

Eine Tasse dampfender Kaffee steht in Mitten von Kaffeebohnen.Beschreibung: "Eine Tasse dampfender Kaffee steht in Mitten von Kaffeebohnen."

Titel: "Kaffeetasse © Max Mustermann"

 

Laptop, auf dessen Bildschirm das Computerspiel Pac-Man zu sehen ist.Beschreibung: "Laptop, auf dessen Bildschirm das Computerspiel Pac-Man zu sehen ist."

Titel: "Zum Artikel über Computerspiele"