Bilder mit ALT-Texten ausstatten
Alternativtexte mögen zwar für die meisten Menschen unsichtbar sein, doch sie vermitteln im Hintergrund auf vielfältige Weise relevante Informationen.
Der Alternativtext (kurz: Alt-Text) eines Bildes, einer Grafik oder eines Logos ist für den Betrachter einer Website nicht direkt im Frontend einsehbar. Alt-Texte werden bei Nutzung eines Screenreaders relevant. Screenreader sind Tools die Blinden oder Menschen mit einer Sehbeeinträchtigung den Inhalt einer Website auf nicht-visuelle Weise wiedergeben. Dies geschieht entweder über eine Sprachausgabe oder die taktile Umwandlung der Inhalte auf einer Braillezeile.
Die Aufgabe von Alt-Texten ist die Funktion und den Bildinhalt eines Bildes beschreibend wiederzugeben. Menschen, die auf einen Screenreader angewiesen sind, können sich auf diese Weise das Bild erklären lassen und mit dem restlichen Inhalt der Website in Zusammenhang bringen.
Zudem dienen Alt-Texte der Suchmaschinenoptimierung (SEO). Bilder mit aussagekräftigen Alt-Texten gelangen in die Google-Bildersuche, wodurch die Website über neue Wege erreicht wird. User erhalten wiederum dank Alt-Texten bessere Websitevorschläge, die zu ihren Suchanfragen passen. Sollte mal eine Website nicht vollständig laden, z.B. aufgrund von geringer Bandbreite, so wird der Alt-Text anstelle des Bildes dargestellt.
Wie schreibt man einen guten Alternativ-Text?
Bilder, Grafiken, Logos und Co. dienen verschiedenen Zwecken. Je nach Typ empfehlen sich unterschiedliche Herangehensweisen zum Schreiben des Alt-Textes.
- Informative Bilder/Grafiken
- Verlinkte Bilder/Grafiken
- Dekorative Bilder/Grafiken
- Reine Schriftgrafiken
Wichtigste Faustregel für das Formulieren von Alt-Texten ist:
Kurz, objektiv & aussagekräftig.
Ergänzungen wie "Das Bild/Grafik zeigt…" oder "Bild ist ein Link" sind nicht vonnöten, dies erkennt bereits der Screenreader und teilt es dem User mit. Der Alt-Text sollte nicht länger als 100 Zeichen sein, dies entspricht ca. 1-2 Sätzen. Wiedergeben muss der Alt-Text Inhalt und Funktion des Bildes.
Informative Bilder/Grafiken
Der Alt-Text vermittelt den Inhalt des Bildes, es erfolgt eine objektive Beschreibung des Bildes. Komplexere Grafiken wie Diagramme und Infotafeln benötigen ebenfalls einen Alt-Text. Es kommt dabei darauf an, ob der Sachverhalt der Grafik im Text aufgegriffen und zusätzlich erklärt wird. In diesem Fall reicht ein kurzer Alt-Text wie "Diagramm wie im Abschnitt XY beschrieben" aus. In der Regel sollte es immer eine textliche Erklärung zu komplexen Grafiken geben.
Befindet sich Text auf einem Bild, welcher nicht im Fließtext der Website aufgegriffen wird, so muss dieser im Alt-Text aufgegriffen werden.
Eingebundene Bilder von Kunstwerken müssen nach WCAG 2.0 nicht beschrieben werden. An dieser Stelle reicht ein identifizierender Alt-Text.
- Beispiel: Zwei Männer in Betrachtung des Mondes von Caspar David Friedrich aus dem Jahr 1818/1819
Beispiel Alt-Text: Auf der sommerlichen Wiese vor der ZHB sitzt ein Mann in einem Sitzsack und arbeitet an seinem Laptop. Vor ihm sitzt ein großer brauner Hund.
Verlinkte Bilder/Grafiken
Bei verlinkten Grafiken oder Bildern muss der Alt-Text das Linkziel nennen. Aus dem Alt-Text muss für den User erkenntlich werden, dass die Grafik als Link dient und somit zu einer anderen (externen) Seite weiterleitet. Dies wäre zum Beispiel bei verlinkten Teaserbildern (z.B. in Variablen Teaser-Boxen) der Fall, welche auf eine News verlinken.
Beispiel Alt-Text: Speiseplan-News
Dekorative Bilder/Grafiken
Bilder, die keinen Mehrwert zusätzlich zum Text liefern sind in der Regel rein dekorativ. Da diese Bilder keinen Inhalt vermitteln, kann in solchen Fällen der Alt-Text leer bleiben. Ein Screenreader überspringt in diesem Fall das Vorlesen des Alternativtextes. Dies ist zum Beispiel bei Buttons der Fall, wenn diese ein Icon passend zum Button-Text besitzen.
Illustrationen, abstrakte Grafiken/Bildelemente fallen ebenfalls in den Bereich der dekorativen Bilder. Hin und wieder ist es schwierig zu entscheiden, ob ein Bild dekorativ ist oder nicht. In diesen Fällen sind sie auf der sicheren Seite, wenn der Alt-Text eine kurze und beschreibende/identifizierende Erklärung enthält.
Schriftgrafiken
Bei Schriftgrafiken entspricht der Alt-Text, dem Text der Grafik ergänzt davon wie der Text auf der Grafik aussieht.
Beispiel Alt-Text: Logo der Europa-Universität Flensburg zeigt in weißer Schreibschrift die Buchstaben "euf" auf einem dunkelblauen Quadrat. Rechts daneben steht in grauer Schrift über zwei Reihen "Europa-Universität Flensburg"
Best-Practice wäre es auf Schriftgrafiken vollständig zu verzichten. Schriftgrafiken können kaum vom User angepasst werden. Wichtige Stichpunkte sind Bildschirmvergrößerungssoftware oder Farbfehlsichtigkeiten. Ausgenommen von der Regel sind Logos, welche Schriftgrafiken enthalten.
Alt-Text in der EN-Version nicht vergessen
Wenn Sie die Webseiten ebenfalls auf Englisch zur Verfügung stellen, beachten Sie, dass in der Dateiliste ein englischer Alt-Text hinterlegt werden muss. Wechseln Sie zu entsprechendem Bild in der Dateiliste und öffnen Sie dessen Metadaten. In der oberen Zeile ist ein ausklappbares Menü in dem zu Beginn "German" steht. Wählen Sie dort "2-Englisch" aus und hinterlegen im Feld "Alternativer Text" die englische Übersetzung ihres Alt-Textes (Abb. 1).
Nicht verwechseln Alt-Text vs. Title
Das Title-Element ist sowohl für Sehende als auch Beeinträchtigte nützlich. Bilder und Links können mit einem title-Attribut versehen werden. Dieses wird sichtbar, wenn mit der Maus über das Bild oder den Link langsam gefahren wird (hovern) (Abb. 2). Im Titel können sich ergänzende Informationen finden, wie "Weiterleitung zur PDF XY". Im Reiter "Medien" des Inhaltselements "Texte, Tabellen und Bilder" lässt sich bei jedem Bild ein Titel hinterlegen (Abb. 3).
