Übungsbeispiele für Alternativtext von Bildern

Hintergrundinformationen

Blinde Menschen und andere mit einem niedrigen Sehvermögen können verständlicherweise nicht sehen, was auf einem Bild ist oder wozu es dient. Einen Ersatz bietet ihre assistierende Technologie, der Screen Reader. Dieser präsentiert ihnen Inhalt oder Funktion des Bildes alternativ in Textform. Allerdings muss diese Präsentation im Quellcode technisch vorgesehen sein. Ansonsten versucht der Screen Reader aus dem Dateinamen oder Dateipfad das Bild zu erklären, was ins Auge gehen kann.

Die technische Umsetzung im HTML-Code erfolgt über ein ALT-Attribut im IMG-Tag und sieht folgendermaßen aus:

<img src="[Bildpfad]" alt="[Alternativtext]"/>

Beispiel 1: Einfaches Foto

Die Altstadt von Innsbruck befindet sich in unmittelbarer Nähe der Tagung. Nützen Sie die Seminarpausen für einen Besuch der mittelalterlichen Gässchen!

bla bla bla

Welcher Alternativtext ist angemessen?

1. Das Goldene Dachl, das Wahrzeichen der Stadt Innsbruck
2. Das Bild ist rein dekorativ, der Alternativtext kann daher leer bleiben. (alt=" ")
3. Überdachter Balkon mit Reliefverzierungen und Blumenschmuck unter den daneben liegenden Fenstern
4. Goldenes Dachl

Überlegungen zum Texting des ALT-Attributs

1. Der Text enthält Informationen, die über den Bildinhalt hinausgehen (Wahrzeichen der Stadt Innsbruck). Er ist also zu lange und liefert Informationen, die ohne Screen Reader verborgen bleiben.
2. Dass sich das Goldene Dachl in der Innsbrucker Altstadt befindet, kann auch bei der Nutzung von Screen Readern von Interesse sein. Das Bild dürfte also nicht nur zur Behübschung der Webseite dienen und sollte daher einen Alternativtext erhalten.
3. Der Text ist zu lange. Eine detaillierte Beschreibung kann mittels LONGDESC-Attribut realisiert werden. Sie wäre dann wohl nicht nur für Menschen interessant, die auf Screen Reader angewiesen sind.
4. Der Text gibt knapp und prägnant an, was auf dem Bild zu sehen ist. Er scheint hier also angemessen.

Beispiel 1a: Einfaches Foto in verändertem Kontext

Welcher Alternativtext ist angemessen?

Stellen wir uns vor, das Foto des Goldenen Dachls befindet sich in einer Bildserie, welche die Renovierung dokumentiert. Welcher Alternativtext wäre angemessen?

1. renoviert
2. 2011
3. Das Goldene Dachl in neuem Glanz
4. Goldenes Dachl

Überlegungen zum Texting des ALT-Attributs in Kontextabhängigkeit

1. Aus dem Kontext geht klar hervor, dass es um die Renovierung des Goldenen Dachls geht. Wenn sich davor etwa ein Foto des baufälligen Gebäudes vor der Renovierung und danach ein Foto aus der Umbauphase befinden, kann renoviert als Alternativtext ausreichend sein. Zugegeben: Die Information ist sehr spartanisch.
2. Wenn der Kontext eine chronologische Darstellung der Renovierungsarbeiten ist und 2011 die Renovierung abgeschlossen wurde, kann 2011 als Alternativtext passen.
3. Wenn sich die Renovierung weniger auf einer dokumentarischen, sondern touristischen Seite befindet, kann Das Goldene Dachl in neuem Glanz der passende freundliche Alternativtext sein.
4. "Goldenes Dachl" steht nicht nur für die Fassadengestaltung eines Gebäudes in Innsbruck, sondern auch für das gesamte Gebäude, in dem sich etwa auch ein Standesamt befindet. Wenn die Bildfolge etwa aus dem renovierten Eingangsbereich, dem Standesamt und schließlich der markanten Fassade mit dem Dachl im engeren Sinn besteht, ist Goldenes Dachl wohl der passende Alternativtext.

Das richtige Texting des Alternativtextes ist also sehr stark vom Kontext des Bildes abhängig.

Beispiel 2: Einfaches Foto mit Untertitel

Welcher Alternativtext ist angemessen?

1. Es braucht in diesem Fall gar kein ALT-Attribut.
2. Goldenes Dachl
3. Der Alternativtext kann leer bleiben. (alt=" ")
4. Foto

Überlegungen zum Texting des ALT-Attributs im Beispiel 2

1. Jedes IMG-Element braucht in jedem Fall ein ALT-Attribut, weil sonst der Screen Reader versucht, aus dem Bildnamen oder Ähnlichem den Inhalt des Bildes wiederzugeben. Diese Option ist also unzulässig.
2. Ohne zusätzliche Funktionalitäten liest der Screen Reader sowohl den Alternativtext, als auch den sichtbaren Text. Solche Redundanzen sollten vermieden werden.
3. Diese Variante wird von vielen empfohlen, ich finde sie aber technisch ergänzungsbedürftig. Der Screen Reader ignoriert das gesamte IMG-Element, wodurch auch nicht mehr vermittelt wird, dass sich an dieser Stelle ein Bild befindet. Der Screen Reader liefert den bloßen Text Goldenes Dachl, was im Kontext ziemlich verwirrend ist.
4. In diesem Fall kann "Foto" als Alternativtext hilfreich sein, da der Screen Reader bei einem leeren ALT-Attribut das ganze IMG-Element ignoriert und so auch die Information verloren geht dass sich hier ein Bild befindet. Der Screen Reader liefert etwa folgenden Text: Grafik Foto Goldenes Dachl. Es bleibt also ein kleiner Makel, weil „Grafik“ und dann noch „Foto“ dem Alternativtext vorangehen.

Best Practise Vorschlag

Aus den Beispielen 1 und 2 haben wir gesehen, dass ein sichtbarer Alternativtext von Vorteil ist, aber technisch optimiert werden muss. Der Code für die Einbindung einer Grafik mit "sichtbarem Alternativtext" könnte optimalerweise etwa folgendermaßen aussehen:

<p class="bild_untertitelt">
  <img
    src="images/dachl.jpg"
    alt="Goldenes Dachl"
  />
  <span
    class="untertitel"
    aria-hidden="true">
    Goldenes Dachl
  </span>
</p>

Was diese technische Realisierung auszeichnet:

• Der "Alternativtext" des Bildes ist immer sichtbar. (Es kann auf das TITLE-Attribut mit einer redundanten Wiedergabe des Alternativtextes verzichtet werden.)
• Bild und Untertitel werden durch den umklammernden P-TAG zu einer Sinneinheit verbunden.
• Der Untertitel wird technisch für den Screen Reader verborgen, nicht aber die Tatsache, dass sich hier ein Bild befindet.

Beispiel 3: Grafiklink ohne Untertitel

Welcher Alternativtext ist angemessen?

Wir haben hier ein Grafiklink, auf dem das Goldene Dachl zu sehen ist. Das Grafiklink befindet sich in einer Liste von Grafiklinks zu den Tourismusregionen in Tirol. Es führt zur Seite www.innsbruck.info. Welcher Alternativtext wäre angemessen?

1. Mehr Infos
2. http://www.innsbruck.info
3. Goldenes Dachl
4. Innsbruck Tourismus

Überlegungen zum Texting des ALT-Attributs

1. Mehr Infos, Weiter oder Ähnliches sind in diesem Kontext bei der Benutzung von Screen Readern absolut ungeeignet. Es bleibt unbekannt, worüber weitere Infos bereitgestellt werden. Trial and Error ist nicht zumutbar.
2. Die Angabe des Zielpfads ist weder ausreichend, noch nötig. Wer sich für das URL interessiert, hat genügend andere Möglichkeiten.
3. Dass sich auf dem Foto das Goldene Dachl befindet, ist in diesem Kontext nicht relevant. Zudem fehlt die adäquate Information über die Funktion des Grafiklinks.
4. Hier wird die Funktion des Grafiklinks adäquat angegeben. Es ließe sich höchstens einwenden, dass Innsbruck ausreichend wäre, weil aus der Überschrift ohnedies hervorgeht, dass es um Tourismus geht. Mit Screen Readern lassen sich jedoch auch sämtliche Links auf einer Webseite herausfiltern, und da ist es hilfreich, wenn auch Informationen über den Kontext aus dem Linktext hervorgehen. Und der Linktext bei dieser Screen Reader – Funktionalität besteht aus dem Alternativtext der Grafik.

Anmerkung

Bei Grafiklinks, die nicht innerhalb der Grafik den bedeutsamen Text zur Funktion haben, sollte der Beschreibungstext technisch und grafisch im Kontext des Bildes sichtbar sein.

Beispiel 4: Grafiklink mit Untertitel

Welcher Alternativtext ist angemessen?

Wir haben hier wiederum ein Grafiklink, auf dem das Goldene Dachl zu sehen ist. Das Grafiklink befindet sich wie im vorherigen Beispiel in einer Liste von Grafiklinks zu den Tourismusregionen in Tirol. Es führt ebenso zur Seite www.innsbruck.info. Allerdings befindet sich unter der Linkgrafik diesmal sichtbar die Bezeichnung der Zielregion. Welcher Alternativtext wäre in diesem Fall angemessen?

1. Innsbruck Tourismus
2. Innsbruck
3. Die Funktion des Links ist sichtbar, also kann der Alternativtext leer bleiben (alt=" ")
4. Innsbruck und zusätzlich sollte der sichtbare Text für den Screen Reader verborgen werden.

Überlegungen zum Texting des ALT-Attributs

1. Dass es sich um eine Tourismusseite handelt, geht wiederum aus dem Kontext hervor. Wer sich mit dem Screen Reader die Links der Seite anzeigen lässt, hätte aber natürlich die Zusatzinformation, dass es nicht um die Innsbrucker Kommune oder Ähnliches geht, sondern um den Tourismus.
2. Dass es um Innsbruck geht, teilt der Screen Reader schon mit, wenn sich der sichtbare Text technisch im Link befindet. Das ist hier der Fall, also würde dieser Alternativtext zu einer Redundanz führen.
3. Die Funktion des Links ist sichtbar, also kann der Alternativtext leer bleiben (alt=" ")
4. Der Screen Reader informiert bereits darüber, dass das Link mit Innsbruck zu tun hat. Dass eine Linkgrafik zum Ziel führt, ist keine relevante Zusatzinformation. Ein leeres ALT-Attribut erscheint mir also angebracht, sofern sich die Linkgrafik und der sichtbare Linktext innerhalb desselben Links befinden.