Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Herausforderung: Der richtige Alternativtext veröffentlicht in 2017zuletzt bearbeitet in

Die Anforderungen an Textalternativen werden in den Web Content Accessibility Guidelines (WCAG) 2.1 formuliert. Demnach müssen alle sichtbaren Grafiken auf Webseiten (aber auch in PDF oder Office-Dokumenten) eine Textalternative aufweisen, die dem gleichen Zweck der Grafik dient.

In den WCAG 2.1 wird nach zwei Grundformen für Textalternativen unterschieden:

  1. Kurze Textalternativen (in der Regel ein Alternativtext)
  2. Lange Beschreibungen (nur in Verbindung mit einer kurzen Textalternative)

Wann eine lange Beschreibung erforderlich wird, hängt zum einen davon ab, welchen Informationsgehalt die Grafik aufweist, und zum anderen von den Informationen im Kontext der Grafik. Je mehr Informationen im Kontext der Grafik stehen, desto weniger Informationen müssen in einer Textalternative untergebracht werden. Für ein und dasselbe Bild können deshalb Textalternativen sehr unterschiedlich ausfallen.

Ein Balkendiagramm mit fünf Balken

Beispielsweise:

Der Alternativtext

Grafiken benötigen einen Alternativtext, weil Screenreader aufgrund ihres textorientierten Zugangs keine grafischen Inhalte lesen können. Obwohl es auch andere Techniken gibt, einer Grafik eine Textalternative zu geben, so gibt es normalerweise keinen Grund, die Textalternative nicht mit einem Alternativtext zu bestimmen.

Es gibt nur zwei Situationen, in denen ein Alternativtext für eine Grafik nicht erforderlich ist:

Bestimmung des Alternativtextes

Der Alternativtext für ein IMG-Element wird mit dem alt-Attribut bereitgestellt:

Eine glänzende, platt gewalzte Büroklammer

<p><img src="bueroklammer.png" alt="Büroklammer"></p>

Ob der Alternativtext den Zweck der Grafik ausreichend angibt, um nicht-sehenden Nutzern gleichartige Inhalte wie Nutzern, die die Grafik auf einer Webseite sehen können, zu vermitteln, steht vorerst auf einem anderen Blatt, denn der grafische Inhalt könnte im umgebenden Text genauer beschrieben sein. Genauso gut könnte die Büroklammer im Alternativtext beschrieben werden müssen (Stichworte sind "glänzend" und "platt gewalzt") oder – falls die Grafik in einem E-Shop verlinkt ist – mit einer Produktbezeichnung identifiziert werden müssen. Die Grafik könnte aber auch rein dekorativ sein; dann kommt ein leerer Alternativtext in Frage. Es sind Zweck und Kontext der Grafik, die die Textalternative bestimmen.

Vier verschiedene Zwecke von Grafiken

Damit Alternativtexte konform zu den WCAG 2.1 formuliert werden, muss der Zweck der Grafik vergegenwärtigt werden. Generell kann zwischen vier verschiedenen Zwecken von Grafiken unterschieden werden:

  1. Funktionale Textalternativen kommen für Grafiken, die Teil einer Komponente wie Links oder Buttons sind, in Frage. Dabei muss der Zweck der Komponente bestimmt werden, die Grafik muss nicht beschrieben werden. Der Zweck der Komponente wird entweder durch die Textalternative selbst oder durch die Kombination der Textalternative mit anderem Text innerhalb der Komponente wiedergegeben.

    Suchfeld mit Lupe als Suchbutton

    Funktionale Textalternativen geben den Namen der Komponente an, z.B. "Suchen" bei einer Lupe für eine Suchfunktion.

  2. Identifizierende Textalternativen geben in knappen Worten den Zweck einer Grafik wieder. Identifizierende Textalternativen kommen insbesondere für illustrierende Grafiken in Frage, die den Kontext anreichern, aber für das Verständnis der Textinhalte nicht notwendig sind.
  3. Beschreibende Textalternativen kommen für informative Grafiken in Frage, die einen wesentlichen Inhalt der Seite darstellen. Beschreibende Textalternativen vermitteln Inhalte und Zusammenhänge in einer Grafik. Da der Zweck mancher informativer Grafiken nicht in knappen Worten zusammengefasst werden kann, muss im Bedarfsfall eine lange Beschreibung in Kombination mit einem identifizierenden Alternativtext eingesetzt werden.
  4. Schließlich können leere Alternativtexte (alt="") für dekorative Grafiken eingesetzt werden, damit die Grafiken in Hilfsmitteln wie Screenreader ignoriert werden können.

Mit ein wenig Erfahrung können diese Grundformen leicht zugeordnet werden. Allerdings kann es auch Mischformen geben insbesondere dann, wenn Grafiken mit Informationsgehalt verlinkt werden. Die grundlegende Frage, die es zu beantworten gilt, ist zu welchem Zweck die Grafik eingesetzt wird.

Nutzungskontext für Alternativtexte

Bevor Alternativtexte formuliert werden, sollten insbesondere die folgenden zwei Punkte berücksichtigt werden:

  1. Alternativtexte sind möglichst objektiv zu formulieren. Interpretationen (subjektive Bewertungen) sind nur dann zulässig, wenn mit der Grafik der Zweck verfolgt wird, Emotionen beim Nutzer auszulösen.
  2. Alternativtexte sind möglichst knapp zu formulieren (80 Zeichen dienen als Orientierung für die maximale Länge). Diese Empfehlung beruht auf dem Nutzungskontext:
    • Das alt-Attribut enthält reinen Text (und kein HTML). Je länger ein Text wird, umso eher werden HTML-Auszeichnungen (Absätze, Sprachangaben usw.) erforderlich sein.
    • Werden die Alternativtexte auf Braille-Zeilen gelesen, so werden sie spätestens nach 80 Zeichen umgebrochen (Braille-Zeilen bestehen in der Regel aus 80 oder 40 Zeichen pro Zeile). Längere Alternativtexte werden u.U. einer Grafik nicht zuordenbar sein.

    Vor allem bei Grafiken mit verschiedenen Inhalten und/oder Gestaltungsmerkmalen kann der knappe Alternativtext deshalb nur einzelne (wesentliche) Merkmale der Grafik erfassen. Weitere Inhalte müssen entweder im Kontext oder mit einer Technik für eine lange Beschreibung bereitgestellt werden.

Lange Beschreibung

Wann eine lange Beschreibung als Teil einer Textalternative erforderlich wird, hängt vom Informationsgehalt der Grafik ab. Lange Beschreibungen werden generell ergänzend zu einem identifizierendem Alternativtext eingesetzt. Ob die zusätzlichen Textinhalte an einer anderen Stelle der gleichen Seite untergebracht werden oder auf einer anderen Seite ausgelagert werden ist ohne Belang, aber der Alternativtext muss auf die lange Beschreibung hinweisen oder die Grafik muss mit der langen Beschreibung verknüpft sein.

Statt einer langen Beschreibung kann der zu vermittelnde Inhalt einer Grafik im unmittelbaren Kontext der Grafik stehen. Je mehr Informationen bereits in Textform im Kontext der Grafik verfügbar sind, desto kürzer wird die Textalternative für die Grafik ausfallen und desto eher wird auf die lange Beschreibung verzichtet werden können.

Kontext einer Grafik

Die Abgrenzung zwischen beschreibenden und identifizierenden Textalternativen dürfte in der Praxis am schwierigsten sein, denn der Kontext muss bei der Bestimmung der Textalternative einbezogen werden. Je mehr informative Grafiken im Kontext beschrieben werden, desto eher kann die Grafik als illustrativ eingestuft werden. Es muss stets abgewogen werden, wieviele Teile der Textalternative im Kontext untergebracht werden und welche Inhalte als eigentliche Textalternative erforderlich sind. Abhängig vom Kontext kann der Alternativtext (und ggf. eine lange Beschreibung) sehr unterschiedlich ausfallen.

Wenn die folgende Grafik

Seitenansicht des Airbus A380 mit dem Slogan 'More personal space'

unvermittelt auf einer Seite steht ohne besonderen Kontext, dann benötigt die Grafik einen Alternativtext, der folgende Angaben macht:

  1. Es handelt sich um ein Flugzeug des Typs Airbus A380.
  2. Das Flugzeug gehört keiner Fluggesellschaft an; es ist neutral lackiert und mit der Aufschrift "Airbus A380 More personal space" versehen.

Natürlich bietet das Foto mehr als nur diese Informationen. Die Textalternative könnte folgende Informationen ebenfalls enthalten:

  1. Das Flugzeug befindet sich in der Luft.
  2. Es handelt sich offenbar um ein Passagierflugzeug.
  3. Das Flugzeug verfügt über vier Triebwerke, zwei an jedem Flügel.
  4. Das Flugzeug fliegt eine Kurve (was an der Neigung erkennbar ist).
  5. usw. bis hin zum strahlend blauen Himmel im Hintergrund.

Der Anlass der Fotografie (z.B. eine bestimmte Luftfahrtschau) oder der Name des Piloten gehören nicht in den Alternativtext, denn diese Informationen sind der Grafik nicht zu entnehmen.

Ein passender Alternativtext für das Bild ist z.B.:

<p><img src="a380.jpg" alt="Seitenansicht des Airbus A380 mit dem Slogan 'More personal space'"></p>

Das gleiche Bild könnte aber in einem Artikel genutzt werden, in dem es um die Vorstellung des Flugzeugs auf einer Luftfahrtschau geht. Der Artikel könnte ein Großteil der grafischen Inhalte im Text bereits beschreiben. Je ausführlicher ein solcher Artikel ist, desto mehr erhält das Bild illustrierenden Charakter und es ist nur noch eine identifizierende Textalternative notwendig, z.B.:

<p><img src="a380.jpg" alt="Airbus A380 in der Luft"></p>

Schließlich könnte die Grafik dekorativ eingesetzt werden und einen Überschriftentext schmücken:

Die Überschrift 'Der neue Airbus A380 ist da' ergänzt mit einem Foto des A380

In diesem Fall wird der wesentliche Inhalt der Grafik ("Airbus A380") bereits im Überschriftentext benannt. Das Foto dient nicht der Informationsvermittlung. Eine Identifizierung der Grafik ist nicht erforderlich:

<h1><img src="a380.jpg" alt=""> Der neue Airbus A380 ist da</h1>

Ein Bild sagt mehr als tausend Worte

Es ist nicht möglich, für jede erdenkliche Grafik eine Regel für die Formulierung eines Alternativtexts aufzustellen. Damit Textalternativen möglichst konform zu den WCAG 2.1 formuliert werden, können zunächst Grafiken in einem Browser abgeschaltet werden. Wenn dann entscheidende Informationen fehlen, um die Seite zu verstehen, dann müssen Textalternativen für Grafiken konkretisiert werden.

Eine weitere Strategie für das Schreiben guter Textalternativen ist, den Einsatz von Grafiken immer als "Add-On" für die Webseite zu sehen. Alle zu vermittelnden Informationen sollten zunächst im Fließtext stehen, um sie dann mit Bildern, Diagrammen und anderen Grafiken zu ergänzen. Auf diesem Weg erhalten Grafiken inhaltlich eine geringere Bedeutung und der hohe Anspruch an den Inhalt der Textalternative hat sich fast von selbst erledigt.

Bilder sagen aber manchmal mehr als tausend Worte vor allem dann, wenn sie Emotionen auslösen. Wenn solche Bilder im Web veröffentlicht werden, steckt oft eine Absicht der Redaktion dahinter. Das folgende Foto dürfte bei einigen Menschen Ekel auslösen:

Ein mit einem Haken durch den Kopf zum Ausbluten aufgehängter Wildschweinkadaver

Eine etwaige Absicht der Redaktion, Emotionen auszulösen, sollte im Alternativtext enthalten sein, z.B. "Mitleid auslösend".

Lese-Tipps

Zur Pflichtlektüre über Textalternativen gehören: