Dekorativ oder informativ: Die Kunst der Alternativtexte

Wie weiss man denn, ob ein Bild dekorativ ist oder Information vermittelt? Zunächst einmal möchte ich erklärten, warum diese Unterscheidung überhaupt wichtig ist.

Damit sehbehinderte oder blinde Menschen die gleichen Informationen erhalten wie Sehende, müssen visuelle Inhalte über eine Textalternative verfügen. Für Bilder bedeutet das: Ein Alternativtext beschreibt, was auf dem Bild zu sehen ist, so dass blinde Personen die genau gleiche Information erhalten.

Jedoch vermitteln nicht immer alle Grafiken relevante Informationen. Es gibt auch dekorative Elemente, die gar keinen anderen Zweck haben ausser eben «schön zu sein». Dekorative Elemente lockern eine Textwüste visuell auf. Sehende lieben Eye-catcher und Eye Candy. Und blinde Nutzerinnen und Nutzer? Diese möchten ohne unnötigen Schnickschnack schnell und effizient die gesuchten Informationen finden. Es gilt deshalb, bei Bildern zwischen informativen und dekorativen Bildern zu unterscheiden.

Merkmale eines dekorativen Bildes

Die wichtigste Frage, die du dir stellen musst, lautet: Kann das Bild genauso gut weggelassen werden, ohne dass Informationen verloren gehen? Wenn ja, dann ist das Bild dekorativ.

Das gilt aber immer für den jeweiligen Kontext. Dasselbe Bild kann in einem anderen Zusammenhang wichtig sein und braucht dann einen beschreibenden Alternativtext.

Umgang mit dekorativen Bildern

Dekorative Bilder müssen korrekt versteckt sein, damit Screenreader diese nicht vorlesen. Für Websites geht das am einfachsten mit einem leeren alt-Attribut (alt=""). Sobald ein alt-Attribut zwar vorhanden, aber eben leer ist, weiss der Screenreader, dass dieses Bild nur dekorativ ist. Fehlt das alt-Attribut, sagt der Screenreader das Bild als unbeschriftete Grafik an.

Bei einer Teaserkachel, in der sowohl Bild, als auch die Überschrift, mit demselben Blogpost verlinkt sind, ist es sinnvoll, das Bild mit aria-hidden zu verstecken. Bei verlinkten Bildern gilt nämlich normalerweise, dass der Alternativtext über das Linkziel informiert. Wenn mehrere Elemente zum selben Linkziel führen, führt das aber wieder zu redundanten Informationen und diese will man vermeiden, damit Screenreader nicht unnötige Informationen vorlesen.

Bei PDF muss man Bilder explizit als Artefakte auszeichnen. Am einfachsten geht das, wenn du im Ausgabeformat (zum Beispiel im Word-Dokument, in der PowerPoint-Präsentation oder in der InDesign-Datei) die Bilder bereits als dekorativ auszeichnest. Wenn du die Datei anschliessend als PDF exportierst, werden Bilder automatisch als Artefakte getaggt. Es ist aber auch möglich, Bilder nachträglich direkt im PDF als Artefakte auszuzeichnen. Wie das geht, zeige ich dir in meinen PDF-Schulungen.

Was gehört in einen Alternativtext?

Ein Alternativtext soll dieselbe Information vermitteln, die das Bild sehenden Menschen vermittelt. Der Alternativtext beschreibt kurz, sachlich und prägnant, was auf dem Bild zu sehen ist. Es ist nicht Aufgabe des Alternativtextes, eine Interpretation zu vermitteln. Was auf dem Bild nicht zu sehen ist, gehört auch nicht in den Alternativtext. Die Textalternative darf auch nicht zweckentfremdet werden, um zum Beispiel Angaben zum Fotografen zu machen. Dafür gibt es andere Wege, wie zum Beispiel eine für alle sichtbare Bildlegende.

Was es sonst zu beachten gilt bei Alternativtexten:

• Alternativtext und Bildlegende dürfen nicht identisch sein. Der Screenreader liest beide Texte vor, weshalb Doppelungen zu vermeiden sind.
• Es ist nicht erforderlich, «Bild von…» oder ähnliches in den Alternativtext zu schreiben. Screenreader sagen Bilder als solche an. Wenn du bei jedem Bild «Bild» schreibst, kommt es zu einer Doppelung.
• Nur wenn die Bildart relevant ist, gehört das in den Alternativtext. Es ist schliesslich ein Unterschied, ob es sich um ein Porträtfoto oder um eine Zeichnung handelt.
• Beschränke dich auf das Wichtigste. Bei Personenfotos ist es zum Beispiel nicht erforderlich, detailliert die Frisur und Kleidung einer Person zu beschreiben. Ausnahmen bestätigen die Regel: Wenn du zum Beispiel Inhaberin eines Coiffeur-Salons bist und auf deiner Website die neusten Trends zeigst, ist es natürlich sinnvoll, die Frisur genau zu beschreiben.

Warum man nicht einfach alle Gestaltungselemente ganz weglassen sollte

Inklusiv gestalten heisst: Für Sehende und Menschen ohne Behinderungen ansprechende Inhalte erstellen, die für Menschen mit Behinderungen genau gleich genutzt werden können. Inklusives Design schliesst niemanden aus und stört nicht – und darf, ja sogar muss, schön sein.