Übungsdatei für Alternativtexte

Inhaltsübersicht

Vorbemerkungen

Verwendung der Übungsbeispiele

Diese Übungsdatei ist vor allem für redaktionell Verantwortliche gedacht. Sie bietet jedoch auch einen Einblick in technische Hintergründe und für technisch Verantwortliche einen Einblick in die Arbeitsweise eines Screen Readers.

Die Beispiele in dieser Übungsdatei enthalten jeweils eine Auflistung von Optionen zu Ihrer eigenen Überlegung. Meine eigenen Überlegungen sind darunter in einem <details>-Element verborgen. Öffnen Sie diese erst nach Ihren eigenen Versuchen.

Relevanz von Alternativtexten

Menschen mit einem reduzierten Sehvermögen können nicht sehen, was auf einem Bild zu sehen ist oder wozu es dient. Einen Hinweis bietet der Screenreader. Dieser präsentiert Inhalt oder Funktion eines Bildes alternativ in Textform so, wie es redaktionell im Alternativtext formuliert ist. Ansonsten versucht der Screenreader aus dem Dateinamen oder Titelattribut das Bild zu erklären, was ins Auge gehen kann.

Technisches Grundverständnis

Die Beschreibung eines Bildelements (<img>) steht im Alternativtext (alt-Attribut) des Bildes. Der Code dafür kann etwa folgendermaßen aussehen:

<img 
  src="images/apfel.jpg"
  alt="Apfel" 
/>

Ist ein Bild hingegen rein dekorativ, muss es für Screen Reader verborgen werden. Dafür genügt es, den Alternativtext leer zu lassen. Der Code dafür kann etwa folgendermaßen aussehen:

<img 
  src="images/trennlinie.jpg"
  alt=""  
/>

Alternativtexte für Bilder der Übungsdatei

Die Bilder auf dieser Webseite dienen zu Übungszwecken. Der Alternativtext beschreibt daher den Bildinhalt im jeweiligen Übungskontext dieser Seite. Der außerhalb dieses Übungskontextes angemessene Alternativtext wird unterhalb des Bildes erörtert.

Beispiel 1: Grundsätze bei der Formulierung

Wir starten mit einem fiktiven Alternativtext. Wie angemessen schätzen Sie folgenden Alternativtext ein:

Das Bild zeigt LRin Gabriele Fischer bei der Eröffnung der neuen Einrichtung für betreutes Wohnen. Sie trägt eine blaue Jacke und lächelt in die Kamera.

Was ist alles faul an diesem Alternativtext?
  1. Der Alternativtext sollte kaum einmal aus ganzen Sätzen bestehen. Überlegen Sie sich eine Schlagzeile für das Bild als Alternativtext: Landeshauptmann begrüßt Delegation aus Griechenland
  2. Dass es sich um ein Bild handelt, braucht nicht erwähnt werden. Diese Information erfolgt bereits durch den Screen Reader. Der Bildtyp wäre relevant, wenn es sich bei dem Bild um eine Karikatur, Skizze oder etwa ein Diagramm handelt.
  3. Eine Beschreibung der Kleidung ist nur nötig, wenn diese für das Verständnis des Inhalts von Bedeutung ist. Es geht im Beispiel nicht um Mode. Relevant wäre es höchstens anzugeben, wenn der Landeshauptmann in einer Schützenuniform die Eröffnung vornimmt.
  4. Dass Menschen auf Fotos in die Kamera lächeln, braucht nicht erwähnt werden. Das ist der Regelfall. Zu erwähnen wären hingegen wohl verärgerte Grimmassen.
  5. Abkürzungen sollen in Alternativtexten vermieden werden. eine Sprachausgabe liest solche oft unverständlich vor.

Es genügt: Landesrätin Gabriele Fischer eröffnet Einrichtung für betreutes Wohnen

Beispiel 2: Einfaches Foto

Das folgende Bild zeigt das Goldene Dachl, das Wahrzeichen der Stadt Innsbruck. Unter den Fenstern befindet sich ein üppiger Blumenschmuck. Der Kontext könnte eine Ausschreibung zu einem Kongress sein.

Übungsbild Goldenes Dachl

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!

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 zu den Varianten
  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 Screenreader verborgen bleiben.
  2. Dass sich das Goldene Dachl in der Innsbrucker Altstadt befindet, kann auch bei der Nutzung von Screenreadern 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 sollte, wenn vorhanden, allen zur Verfügung gestellt werden.
  4. Der Text gibt knapp und prägnant an, was auf dem Bild zu sehen ist. Er scheint hier also angemessen.

Beispiel 2a: Einfaches Foto in verändertem Kontext

Stellen wir uns vor, das Foto des Goldenen Dachls befindet sich in einer Bildserie, welche die Renovierung des gesamten Gebäudes dokumentiert.

Welcher Alternativtext ist im neuen Kontext angemessen?

  1. Renoviertes Dachl
  2. 2011
  3. Das Goldene Dachl in neuem Glanz
  4. Goldenes Dachl
Überlegungen zur Formulierung 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 Renoviertes Dachl als Alternativtext ausreichend sein.
  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 eine 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.

Die angemessene Formulierung des Alternativtextes ist also sehr stark vom Kontext des Bildes abhängig.

Beispiel 3: Foto mit Bildbeschriftung

Im folgenden Beispiel verfügt das Bild über eine sichtbare Beschriftung, die das Bild beschreibt.

Übungsbild Goldenes Dachl

Goldenes Dachl

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!

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 zur technischen Realisierung
  1. Jedes img-Element muss ein alt-Attribut enthalten. Fehlt dieses gibt ein Screen Reader als Bildbeschreibung dem Bildnamen wieder, was in der Regel ins Auge geht. Diese Option ist also unzulässig.
  2. Ohne zusätzliche Funktionalitäten liest der Screenreader sowohl den Alternativtext als auch den sichtbaren Text. Solche Wiederholungen sind störend und werden vielfach auf technische Mängel zurückgeführt.
  3. Screen Reader ignorieren das img-Element gänzlich. Es ist daher nicht mehr klar, dass sich an dieser Stelle ein Bild befindet. Diese Option ist also ebenfalls auszuschließen.
  4. Ein Screen Reader würde wiedergeben: Foto Grafik Goldenes Dachl. Das Vorhandensein eines Bildes und der Bildinhalt werden also wiedergegeben. Befinden sich auf einer Webseite jedoch mehrere Bilder mit diesem Hack, führen Navigationsmechanismen für Screen Reader jeweils nur zu einem Bild mit der Beschreibung Foto.

Best Practise Vorschlag

All diese Lösungen sind also unbefriedigend. Ein Ausweg besteht darin, die sichtbare Bildbeschriftung für Screen Reader gänzlich zu verbergen. Dafür steht ein ARIA-Attribut zur Verfügung. Der Code sieht etwa folgendermaßen aus:

<img 
  alt="Goldenes Dachl" 
/>
<p aria-hidden="true">
  Goldenes Dachl
</p> 

Beispiel 4: Bild als Steuerelement

Als Steuerelemente sind hier Links, Schalter oder Auswahlkomponenten in Formularen gemeint.

Im folgenden Beispiel wird das Bild des Goldenen Dachl als Linkgrafik in einer Liste von Links verwendet. Ein Klick führt zum Tourismusverband Innsbruck.

Tourismusverbände in Tirol

Welcher Alternativtext ist angemessen?

  1. Goldenes Dachl
  2. Innsbruck Tourismus
  3. www.innsbruck.info
  4. Der Link ist bereits mit Text beschriftet. Die Linkgrafik erhält daher einen leeren Alternativtext.
Überlegungen zu diesen Ansätzen
  1. Dass auf dem Foto das Goldene Dachl zu sehen ist, hat für den Link keine Relevanz. Entscheidend ist lediglich der Inhalt der Zielseite.
  2. Mit Innsbruck Tourismus 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 Screenreadern lassen sich jedoch auch sämtliche Links auf einer Webseite herausfiltern, und da ist es hilfreich, wenn auch knapp Informationen über den Kontext aus dem Linktext hervorgehen.
  3. Die Angabe der Zieladresse auf einem Weblink ist weder hinreichend noch nötig. Wer sich für die URL interessiert, hat genügend andere Möglichkeiten.
  4. Der Link verfügt keinesfalls über eine Beschriftung. Ob ein Grafiklink tatsächlich für Alle mit Text beschriftet ist, lässt sich jedoch lediglich durch einen fachkundigen Blick in den Quellcode eruieren.

Grundsätzlich empfiehlt es sich, Steuerelemente mit einer sichtbaren Beschriftung zu versehen. Die Bedeutung von Icons und Bildern kann nicht immer als allgemein bekannt vorausgesetzt werden. Und bei der Verwendung einer Spracheingabe wird der genaue Wortlaut der Beschriftung vorausgesetzt.

Beispiel 5: Beschrifteter Link mit illustrativem Zusatzbild

Im folgenden Beispiel besteht der Link aus dem Bild des Goldenen Dachl und ergänzend einer textuellen Beschriftung.

Tourismusverbände in Tirol

Welcher Alternativtext ist angemessen?

  1. Goldenes Dachl
  2. Innsbruck
  3. Der Alternativtext muss leer sein.
  4. Innsbruck und zusätzlich sollte der sichtbare Text für den Screenreader verborgen werden.
Überlegungen zu diesen Ansätzen
  1. Dass auf dem Foto im Link ergänzend zum Text auch das Goldene Dachl zu sehen ist, hat für den Linkzweck keine Relevanz.
  2. Dass es um Innsbruck geht, teilt der Screenreader schon mit, wenn sich der sichtbare Text technisch im Link befindet. Das ist hier der Fall, also würde dieser Alternativtext zu einer Wiederholung der Beschriftung führen.
  3. Die Funktion des Links ist im Linktext beschrieben, also muss der Alternativtext tatsächlich leer bleiben (alt=" ").
  4. Die vorhandene textuelle Beschriftung ist entscheidend. Für den Screenreader kann mit gutem Gewissen auch das Vorhandensein einer Linkgrafik verborgen werden.