Alternativtexte und Textalternativen

Blinde Menschen und Menschen mit starker Sehbehinderung sind haupts?chlich mit zwei Herausforderungen konfrontiert: Dass die interaktiven digitalen Benutzeroberfl?chen mit ihren Screenreadern bedient werden k?nnen (siehe Info, Semantics & Feedback und Flexible Input im Bereich e-Accessiblity Basics) und dass jegliche visuell dargestellten Informationen auch in Textform vorhanden sind und von assistiven Technologien wie eben Screenreadern ausgegeben werden.

In aller Kürze

  • Einfache Bilder, wie z.B. Portraits, einfache Fotos oder Logos, werden mit kurzen und pr?gnanten Beschriftungen in typischen Alt-Attributen versehen.
  • In verlinkten Bildern, z.B. Logos oder Icons, stehen die Linkziele/Funktionen im Zentrum der Aufmerksamkeit (z.B. alt="Druckansicht")
  • Dekorative Bilder und Stimmungsbilder werden mit leeren Alt-Attributen versehen (alt="", das alt-Attribut darf nicht weggelassen werden). So werden Sie von assistiven Technologien ignoriert.
  • Komplexe Bilder werden ausserhalb ihrer Alt-Attribute eingehend beschrieben. Die Alt-Attribute informieren den Leser darüber, wo die ausführliche Bildbeschreibung zu finden ist. Vorzugsweise in den die Bilder unmittelbar umgebenden Fliesstexten.

Wie werden Alternativtexte in Bildern implementiert

Zu diesem Zweck verfügen die meisten Dokument-Formate über die M?glichkeit, Bilder mit Alternativtexten zu versehen. Einige Beispiele hier nachfolgend:

HTML / EPUB

In HTML und EPUB handelt es sich um Alt-Attribute von Bildelementen (<img>):

<img src="https://moodle-app2.let.ethz.ch/pluginfile.php/1238987/mod_label/intro/semantics_slider.png" alt="Two typical examples of slider controls, allowing users to select a value or a range of two values between 0 and 50." class="img-fluid atto_image_button_text-bottom" width="309" height="184">

Screenshot Moodle Image Properites pop-up.

Hier beispielhaft ein Screenshot, wie Alternativtexte Bildern in Moodle zugewiesen werden.

MS Office

Screenshot Alternativtext bearbeiten in MS Word

In MS Office lassen sich Alternativtexte via Rechts-Klick > Alternativtext bearbeiten… Bildern zuweisen oder als dekorativ deklarieren (siehe weiter unten).  

PDFs (Adobe)

Screenshot Alternativtext festlegen über Werkzeug "Barrierefreiheit" in Acrobat Pro

Auch Adobe Acrobat erlaubt die (Nach-) Bearbeitung von Alternativtexten für Bilder. ?ber das Werkzeug ?Barrierefreiheit? in Acrobat Pro.

LaTeX

In LaTeX werden Alternativtexte über den Befehl \alt{} Bildern zugewiesen. Siehe folgendes Beispiel:

\begin{figure}
    \centering
    \includegraphics[width=10cm]{apollo17_earth.jpg}
    \alt{Image of the Earth from outer space}
    \caption{Image of the Earth from the Apollo 17 mission}
    \label{fig:earth}
\end{figure}

InDesign

Screenshot Objektexportoptionen in InDesign

In InDesign geschieht dies über Rechtklick auf das Bild > Objektexportoptionen… in einem Pop-Up Fenster.

Die vier Typen von Bildern

Damit jene, die auf Textalternativen angewiesen sind, die für sie relevanten Informationen erhalten, ist auf die folgende Unterscheidung verschiedener Typen von Bildern zu achten. Worin die relevanten Informationen im Einzelnen bestehen, ist immer stark vom jeweiligen Kontext abh?ngig. Die Einsch?tzung welche Informationen in einem bestimmten Kontext für das Verst?ndnis relevant sind obliegt den Autorinnen und Autoren. Nur sie wissen mit Bestimmtheit, was sie mit einem Bild vermitteln wollen. Beim Einsatz von Bildern gilt es also immer, sich genau zu überlegen, welche Informationen vermittelt werden sollen, und diese Info in Worte zu fassen.
 

1. Einfache Bilder (z.B. Portrait, Logo)

Screenshot des Bildes mit angezeigtem alt-Text

Der Alternativtext beschreibt kurz und pr?gnant die beabsichtigte Botschaft des Bildes. Das Bild zeigt die bei der Preisverleihung anwesenden Damen und Herren. Im Alternativtext werden Anlass und abgebildete Personen mit Namen genannt.

alt="R?sslerpreis 2022: Günther Dissertori, Tanja Stadler, Max R?ssler, Julia Danath-Schuh, Pius Baschera."

 

2. Verlinkte Bilder und interaktive Schaltfl?chen mit Symbolen

Screenshot Social Media Icons mit eingeblendeten Alternativtexten Facebook, Twitter, Instagram, etc.

Bei Links wird im alt-Attribut das Linkziel beschrieben. Bei Schaltfl?chen/Buttons ist es deren Funktion.
 

3. Stimmungsbilder / Dekorative Bilder ohne Bedeutung

Nicht selten werden Bilder in Dokumenten eingesetzt, welche keine spezifischen Informationen vermitteln sollen, sondern ausschliesslich dekorativen Zwecken dienen. In diesen F?llen lassen sich Bilder für Screenreader-Nutzer ?ausblenden? indem explizit leere-Alternativtexte gesetzt werden

Screenshot eines dekorativen Artikel-Teaser Bilds

alt="": Das alt-Attribut ist gesetzt, aber mit einem "leeren" Wert.

Das Bild wird von Screenreadern vollst?ndig ignoriert.
 

4. Textalternativen für komplexe Illustrationen

Komplexe Illustrationen wie auch Grafiken mit statistischen Auswertungen bedürfen komplexerer Textalternativen von gr?sserem Umfang. Da die alt-Attribute nicht geeignet sind, um l?ngere und semantisch komplexere Informationen zu verfassen, müssen diese Informationen ausserhalb angeboten werden. Idealerweise im normalen für alle sichtbaren Text des Artikels oder in einem Ausklappelement unmittelbar vor oder nach der Illustration. Alternativ kann die Textalternative auch in externen Dateien oder z.B. im Anhang eines Dokuments verlinkt sein.

Der Alternativtext verweist auf die ausführliche Textpassage, in der der Inhalt der Grafik detailliert beschrieben wird, wo sich diese befindet und wie der Leser dorthin und zurück gelangt.

In schematischen Bildern (z. B. Aufbau einer menschlichen Zelle) werden alle Elemente und ihre Beziehungen zueinander beschrieben. In Diagrammen werden Achsen mit Einheiten, Verl?ufe der Daten, offensichtliche Zusammenh?nge, Wechselwirkungen usw. beschrieben.

Ausführliche Guidelines mit Verweisen auf typische Beispiele aus dem wissenschaftlichen Bereich finden sich auf der empfehlenswerten Website von externe Seitediagramcenter.org:

Best-Practice Beispiele für Textalternativen für komplexe Illustrationen und Grafiken aus dem Lehralltag der ETH

JavaScript wurde auf Ihrem Browser deaktiviert