Alternativtexte, oder auch Alt-Texte genannt, sind ein Teilaspekt für barrierefreie Webseiten. Es handelt sich dabei um Texte, die sich im Alt-Tag eines Bildes oder auch anderer Elemente auf Webseiten befinden. Sie beschreiben den Inhalt und die Funktion des Bildes und sind neben den Accessibility-Aspekten auch für SEO – die Auffindbarkeit der Inhalte in Suchmaschinen – vorteilhaft.
Alternativtexte für Barrierefreiheit
Ein Bild mit einer Beschreibung im Alternativtext kann von Screenreadern vorgelesen oder an eine Braillezeile weitergegeben werden. Ohne Alternativtext kann ein Bild von Menschen mit Sehbehinderungen inhaltlich nicht oder nur schwer erfasst werden. Der Screenreader würde in diesem Fall nur vorlesen, dass es sich um ein Bild handelt.
Alternativtexte für SEO
Alternativ-Texte sind aber nicht nur für die Barrierefreiheit von Websites wichtig, sondern auch für SEO. Suchmaschinen können Bilder ausschließlich via Alt-Text verstehen und auch ausgeben. Bilder mit Alt-Texten können die SEO einer Seite positiv beeinflussen. Außerdem werden Alt-Texte an Stelle von Bildern angezeigt, wenn ein Bild nicht lädt, zum Beispiel bei einer schlechten Internetverbindung.
Umsetzung von Alternativtexten
Alt-Texte können auf verschiedenen Wegen umgesetzt werden. In HTML wird der Alternativtext in den sogenannten Alt-Tag geschrieben, daher der abgekürzte Name “Alt-Text.” Hier ein genaues Beispiel für einen Alt-Text in HTML:
<img src=“Bild.png“ alt=”Ein schwarzer Hund rennt von links über eine große Wiese.”>
WordPress bietet eine simple Methode zum Einfügen von Alternativtexten für Bilder und auch andere Mediendateien, nämlich ein spezifisches Feld für den alternativen Text in der Mediathek. Mehr zur Barrierefreiheit für WordPress Websites mithilfe von Google Lighthouse findest du in unserem Blogartikel.
Der passende Alt-Text für jeden Bild-Typ
Bevor man einen Alternativtext schreibt, muss zuerst der Typ des Bildes bestimmt werden. Unterschieden werden Bilder in drei Gruppen: funktional, informativ und dekorativ. Ein funktionales Bild dient gleichzeitig als Link oder Schaltfläche, während informative Bilder Informationen zum Text hinzufügen. Dekorative Bilder besitzen keinerlei Funktion und bieten keine zusätzlichen Informationen und sind somit, wie der Name bereits verrät, rein dekorativ.
Dos für Alternativtexte
Einer der wichtigsten Punkte für das Schreiben von Alternativtexten ist die korrekte Rechtschreibung und Zeichensetzung. Der Alt-Text sollte im Normalfall etwa 80-100 Zeichen bzw. maximal ein bis zwei Sätze lang sein, kann aber je nach Komplexität des Bildes auch länger sein.
Die Beschreibung des Bildes beinhaltet seine Funktion und seinen Inhalt. Dies gilt für alle Bilder, die nicht rein dekorativ sind. Für die oben gezeigte Info-Grafik würde beispielsweise folgender Alt-Text passen:
“Grafik, die die Dos und Don’ts für Alt-Texte in Form einer vereinfachten Tabelle darstellt. Eine ausführliche Beschreibung der Dos und Don’ts ist im Artikeltext zu finden.”
Eine Ausnahme sind auf Social Media veröffentlichte Bilder. Diese sollten unserer Empfehlung nach immer einen Alternativtext haben, unabhängig vom Typ des Bildes. Denn in einer Umfrage des Deutschen Blinden- und Sehbehindertenverband e. V. wünschten sich mehr als Zwei-Drittel der Befragten, dass jedes Bild auf Social Media einen Alternativtext haben sollte.
Die relevanten Bildbestandteile sollten objektiv und so kurz wie möglich, aber so ausführlich wie nötig beschrieben werden, während auf den Kontext des Bildes geachtet wird. Je nach Kontext, der unter anderem das Thema, Ziel und Informationen in umgebenden Texten beinhaltet, können verschiedene Bildbestandteile desselben Bildes relevant sein.
Im folgenden Bild sind beispielsweise eine Tasse und ein Laptop mit einer laufenden Videokonferenz abgebildet. Je nach Kontext des Artikeltextes könnte der relevante Bildbestandteil ausschließlich die Videokonferenz mit mehreren sichtbaren Personen sein. Ein guter Alt-Text dafür könnte dann lauten:
“Laptop, der eine laufende Videokonferenz mit einer großen Anzahl von Teilnehmern mit eingeschalteter Kamera zeigt.”
In einem anderen Kontext könnte nur die Kombination aus der Tasse und dem Laptop relevant sein, wenn es sich zum Beispiel um einen Artikel über Homeoffice Jobs handelt. Dann könnte man als Alt-Text folgendes schreiben:
“Eine Tasse steht neben einem Laptop mit laufender Videokonferenz.”
Wenn Text auf dem Bild ist, muss dieser Text in den Alt-Text übernommen werden, gemeinsam mit dem Aussehen des Textes. Bei funktionalen Bildern, die Links enthalten bzw. verlinkt sind, muss der Hyperlink, sowie dessen Ziel im Alt-Text genannt werden. Ein Beispiel dafür wäre das unten stehende Banner aus unserem Blog, was mit folgendem Alt-Text beschrieben werden kann:
“Banner-Grafik mit Text Gratis-Download Storytelling Checkliste PDF Formular. Link, um kostenlos Storytelling Checkliste als PDF Formular herunterzuladen.”
Don’ts für Alternativtexte
Für den Fall, dass ein Bild rein dekorativ ist oder der Alt-Text mit dem an dem Bild angrenzenden Text übereinstimmt, benötigt das Bild keinen Alternativtext. Außerdem sollte ein Alt-Text nicht mit so etwas wie “Dieses Bild zeigt…” oder “Dieses Bild ist ein Link” beginnen. Der Screenreader erkennt nämlich Grafiken, Bilder und Verlinkungen selbständig als solche und liest es dementsprechend auch so vor. Phrasen wie “Hier klicken” oder “Besuchen Sie uns” reichen als Alt-Text allerdings nicht aus, da sie das Ziel des Links nicht erklären.
Entgegen dem, was SEO normalerweise bevorzugt, sollte das Fokus-Keyword tatsächlich nicht im Alt-Text vorkommen. Suchmaschinen markieren den Inhalt als Spam, wenn der Alt-Text überfüllt ist, unpassende Schlüsselwörter verwendet und wenn der Alt-Text nicht mit dem Rest des Textes zusammen passt.
Sonderfälle
Abgesehen von regulären Bildern gibt es natürlich auch noch Sonderfälle wie Diagramme, Grafiken und Tabellen. In diesen Fällen sollten der Grafik-Titel und eine kurze Beschreibung oder Zusammenfassung im Alt-Text angegeben werden, zusammen mit einem Verweis auf eine vollständige Erklärung im Artikeltext. Tabellen können meist von Screenreadern erkannt und navigiert werden.
Zusammenfassung: Beispiele für gute Alt-Texte
Als Abschluss des Artikels sind im Folgenden vier konkrete Beispiele von Bildern mit entsprechenden Alt-Texten aufgeführt:
1. Alt-Text für ein funktionales Bild:
Beispiel für den Alt-Text:
Verlinkte Banner-Grafik mit Textzug “Gratis Anleitung zu Alternativen Texten”, einem Button mit dem Text “Hier klicken” und dem Logo der Rings Kommunikation GmbH. Link führt zur URL https://www.rings-kommunikation.de/Alt-Texte-fuer-Bilder/.
2. Alt-Text für ein informatives Bild:
Beispiel für den Alt-Text:
Grafik, die den Unterschied zwischen 100 dpi, 200 dpi und 400 dpi mit Hilfe von verschiedenfarbigen Punkten in quadratischer Anordnung zeigt. Die Anzahl der Punkte vergrößert sich mit der Zunahme der dpi, während die Punkte selbst kleiner werden.
3. Alt-Text für ein dekoratives Bild:
Ein Alt-Text fällt für dieses Bild weg, da es rein dekorativ ist.
4. Alt-Text für ein Social Media Bild:
Beispiel für den Alt-Text:
Foto von zwei sitzenden Personen, die auf ihre Smartphones schauen und gemeinsam lachen.
Credits:
Rawpixel | Free Collection | Layout & Farben angepasst
Unsplash User Chris Montgomery| Ausschnitt bearbeitet
iStock/Epiximages, Bild mit KI bearbeitet
iStock/LeoPatrizi