Übungsdatei für Alternativtexte

Inhaltsübersicht

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"

Einfaches Foto in Veranstaltungshinweis

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.

Abbildung eines Zitats

Die folgende Grafik enthält den Text "Erkenne dich selbst" in dicken Anführungszeichen. (❝ ❞)
Die Hintergrundfarbe ist gold.
Der Text erscheint in Courier Großbuchstaben mit einer visuellen Verfremdung.
Die Grafik verfügt im Beispiel über keine Kontexthinweise.

Übungsbild Abbildung eines Zitats

Welcher Alternativtext ist angemessen?

  1. Erkenne dich selbst!
  2. Zitat: Erkenne dich selbst!
  3. ❝Erkenne dich selbst!❞
  4. Das Zitat sollte nicht als Abbildung von Text eingebaut werden, sondern als Text.
Überlegungen zu den Varianten
  1. Wenn im Kontext die Aussage entscheidend ist, passt als Alternativtext: Erkenne dich selbst!.
  2. Wenn im Kontext die Verwendung als Zitat entscheidend ist, passt als Alternativtext: Zitat: Erkenne dich selbst!
  3. Wenn im Kontext die Verwendung der besonderen Anführungszeichen entscheidend ist, passt als Alternativtext: ❝Erkenne dich selbst!❞
    Ansonsten ist die Darstellung von Satzzeichen im Alternativtext nicht relevant.
  4. Wenn immer möglich, muss statt einer Abbildung von Text tatsächlich Text verwendet werden. Das visuelle Erscheinungsbild des Textes sollte mittels CSS-Anweisungen realisiert werden. (Erfolgskriterium 1.4.5 Abbildung von Text)
    Das Zitat sollte also tatsächlich nach Möglichkeit nicht als Abbildung von Text eingebaut werden.
    Es müssen wesentliche Gründe vorliegen, um wie bei einem Logo eine Abbildung von Text einzusetzen.