Alt-Text
Ein Alt-Text (kurz für Alternativtext) ist eine kurze Bildbeschreibung, kurze sprachliche Übersetzung eines visuellen Inhalts im Internet, die blinden Benutzern von Hilfsmitteln wie Screenreadern anstelle des Bildes vorgelesen wird. Alt-Texte sind eine wichtige Bedingung für ein barrierefreies Internet. Sie können jedoch auch anstelle des Bildes im Browser angezeigt werden, wenn z. B. die Internetverbindung zu langsam ist, um das Bild zu laden, oder wenn Bildanzeige zum beschleunigten Laden oder Einsparen von Datenvolumen deaktiviert ist, sowie von textbasierten Browsern. Mit Alt-Text versehene Bilder können von Suchmaschinen besser gefunden werden.[1]
Alt-Texte als Bedingung von Barrierefreiheit
Viele Menschen haben Schwierigkeiten, Bilder zu sehen oder deren Inhalte zu erkennen. Dies gilt vor allem für blinde und sehbehinderte Menschen.[2]
Eine Lösung für eine barrierefreie Zugänglichkeit von Bildern bieten textliche Alternativen. Zu diesen zählen neben umfangreicheren Bildbeschreibungen für Blinde Alt-Texte. Die Anforderung, textliche Alternativen bereitzustellen, ist auch in nationalen und internationalen Richtlinien für die Barrierefreiheit niedergeschrieben.
In der Barrierefreien-Informationstechnik-Verordnung (BITV) 2.0 (2011), die für die Websites deutscher Behörden verbindlich ist, heißt es: „Für jeden Nicht-Text-Inhalt, der dem Nutzer oder der Nutzerin präsentiert wird, ist eine Text-Alternative bereitzustellen, die den Zweck dieses Inhalts erfüllt“.[3][4]
Leider ist bisher nur ein Bruchteil aller Bilder und Grafiken im Internet mit Alt-Texten versehen.
Länge und Inhalt der Alt-Texte
Die Ausgabe von Alt-Text ist universell und geräteunabhängig. Er kann von Screenreadern vorgelesen und über Braillezeilen in Punktschrift (Blindenschrift) angezeigt werden.[2]
Es gibt keine einheitlichen Standards für Länge und Inhalt von Alt-Texten. Dazu gibt es zu viele verschiedene Arten von visuellen Inhalten und zu unterschiedliche Interessen und Bedürfnisse blinder und sehbehinderter Internetnutzer. Aber man kann sagen, dass Alt-Texte möglichst kurz gehalten werden sollen.
Zumal Screenreader Alt-Texte nicht stückweise verarbeiten können. Alt-Texte werden unabhängig von ihrer Länge in einem Stück vorgelesen.[5]
Braillezeilen haben Standardbreiten von 40 beziehungsweise 80 Zeichen. Das spräche dafür, die Länge von Alt-Texten auf diese Länge zu beschränken.[6] Manche Bilder benötigen jedoch mehr Wörter, um beschrieben zu werden.
Die Accessibility-Fachstelle der Universität Toronto hat Obergrenzen vorgeschlagen, die heute weitgehend akzeptiert werden. Sie liegen in deutscher Sprache bei 115 Zeichen, im Englischen, das kürzere Wörter hat, bei 90.[7]
Andere Nutzungen des Alt-Textes, z. B. als Anzeige, wenn ein Bild im Browser blockiert wird, oder durch Suchmaschinen,[8] würden längere Alt-Texte erlauben. Da jedes Bild jedoch nur über ein einziges Alt-Text-Feld verfügt, sollte dieses möglichst allen Zwecken gerecht werden. Das gilt auch für die Inhalte.
Alt-Texte müssen keinen ganzen Satz bilden.[5] Jedoch lassen sich eventuelle Handlungen im Bild besser in ganzen Sätzen beschreiben.
Besonders im Hinblick auf die Suchmaschinenoptimierung ist darauf zu achten, das Hauptkeyword zu nennen. Von Keyword Stuffing (Vollstopfung) ist jedoch sowohl im Interesse der Lesbarkeit als auch im Hinblick auf die Suchmaschinen abzuraten. Von Google z. B. könnte die gehäufte Verwendung von Schlüsselwörtern als Spam gewertet werden.[9]
Weiterhin muss die Information, dass es sich um eine Grafik oder um einen Link handelt, nicht im Alt-Text stehen. Der Screenreader gibt stets die Information „Grafik“ oder „Grafik Link“ und folgend den hinterlegten Alt-Text aus.[5]
Handelt es sich um Grafiken mit Text, sollte genau dieser Text auch in den Alt-Text eingebunden werden.[10]
Eine Doppelung der Informationen im Alt-Text und in der Bildunterschrift sind zu vermeiden. Copyright-Informationen oder der Name des Fotografen gehören nicht in den Alt-Text.[5] Bei rein-dekorativen Bildern sollte der Alt-Text leer sein.[11]
HTML
In HTML kann das alt-Attribut für Alt-Text benutzt werden. Seit HTML 4.01 ist es bei Bildern erforderlich. Für Java-Applets und Eingabefelder ist es optional.[11]
Die meisten CMS (Content-Management-Systeme) unterstützen das Alt-Attribut.[9]
Beispiel
<img src="größenvergleich.jpg" alt="Die Erde hat einen etwa doppelt so großen Durchmesser wie der Mars.">
Diese Codezeile stellt üblicherweise das Bild größenvergleich.jpg dar. Kann das Bild nicht geladen werden oder wird das Format vom Webbrowser nicht unterstützt, wird stattdessen der Text „Die Erde hat einen etwa doppelt so großen Durchmesser wie der Mars.“ angezeigt.[12][13]
Ausgabe
Screenreader lesen den Alt-Text vor. JAWS z. B. leitet den alternativen Text mit dem Wort „Grafik“ ein. Wenn das Bild ein Link ist, kündigt JAWS den alternativen Text mit „Grafik Link“ an.
Screenreader ignorieren Bilder ohne alternativen Text und sagen nichts, aber die Benutzer können ihre Einstellungen so ändern, dass der Dateiname vorgelesen wird.
Wenn das Bild ohne Alt-Text ein Link ist, lesen Screenreader normalerweise das Ziel des Links (das href-Attribut in HTML) vor, aber sie könnten auch den Dateinamen von dem Bild vorlesen.[14]
Einzelnachweise
- Best Practices für die Suchmaschinenoptimierung für Google Bilder. Abgerufen am 2. März 2021.
- Textalternativen für Bilder - BITV-Lotse. Abgerufen am 4. Januar 2021.
- Sarah Kitza: Gestaltung von Alternativtexten – eine empirische Studie aus Nutzerinnen- und Nutzersicht. Hrsg.: TU Dortmund. 2015 (barrierefreies-webdesign.de [PDF]).
- Startseite BITV-Lotse - Barrierefreie Informationstechnik-Verordnung – BITV 2.0 - BITV-Lotse. Abgerufen am 4. Januar 2021.
- Wie schreibe ich einen guten Alternativtext für Blinde? 9. August 2020, abgerufen am 4. Januar 2021 (deutsch).
- Textalternativen für Bilder - BITV-Lotse. Abgerufen am 4. Januar 2021.
- SEO: Wie lange soll ein ALT-Tag sein? TechStream. 28. April 2020, abgerufen am 4. Januar 2021 (deutsch).
- Alternativtexte für Bilder sind wichtig für Barrierefreiheit und SEO. In: Willkommen beim TechSmith-Blog. 19. Juni 2018, abgerufen am 4. Januar 2021 (amerikanisches Englisch).
- Alt-Tag & Title-Tag einfach und verständlich erklärt - SEO-Küche. In: SEO-Küche - Online Marketing Agentur für mehr Performance. Abgerufen am 4. Januar 2021 (deutsch).
- Was ist ein ALT-Attribut (ALT-Tag)? - Ryte Wiki. Abgerufen am 4. Januar 2021.
- How to specify alternate text. W3C, abgerufen am 5. Januar 2021 (englisch).
- W3C: HTML 4.01 Specification: Introduction to objects, images, and applets, 24. Dezember 1999
- Accessibility – W3C
- Gestaltung für Screenreader-Kompatiblität | Barrierefreie Gestaltung. Abgerufen am 4. Januar 2021 (deutsch).
Weblinks
- Use the alt attribute to describe the function of each visual – Tips for Webmasters, W3C Quality Assurance (englisch)
- Alternative Text – Web Accessibility in Mind (wahlweise englisch, deutsch, französisch)