Alt-Text
Ein Alt-Text (kurz für Alternativtext) ist eine kurze Bildbeschreibung oder eine 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
[Bearbeiten | Quelltext bearbeiten]Vor allem Menschen mit Blindheit und Sehbehinderung haben Schwierigkeiten, Bilder zu sehen oder deren Inhalte zu erkennen.[2]
Eine Lösung für eine barrierefreie Zugänglichkeit von Bildern bieten textliche Alternativen. Zu diesen zählen neben Bildunterschriften und 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 deutschen 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]
Bislang haben nur wenige Bilder und Grafiken im Internet einen Alt-Text.
Länge und Inhalt der Alt-Texte
[Bearbeiten | Quelltext bearbeiten]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. Generell sollte der Alt-Text so kurz wie möglich sein. Screenreader können Alt-Texte nicht stückweise verarbeiten. Sie 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 wird darauf geachtet, das Hauptkeyword zu nennen. Von Keyword Stuffing (Vollstopfung) wird jedoch sowohl im Interesse der Lesbarkeit als auch im Hinblick auf die Suchmaschinen abgeraten. Von Google z. B. könnte die gehäufte Verwendung von Schlüsselwörtern als Spam gewertet werden.
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.[9]
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.[10]
HTML
[Bearbeiten | Quelltext bearbeiten]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.[10] Umgangssprachlich wird dieses Attribut auch als Alt-Tag bezeichnet, obwohl es kein HTML-Tag ist[11].
Die meisten CMS (Content-Management-Systeme) unterstützen das Alt-Attribut.
Beispiel
[Bearbeiten | Quelltext bearbeiten]![Die blau-weiße Erde und der braune Mond sind direkt nebeneinander abgebildet. Schwarzer Hintergrund.](http://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Mars%2C_Earth_size_comparison.jpg/220px-Mars%2C_Earth_size_comparison.jpg)
<img src="größenvergleich.jpg" alt="Die blau-weiße Erde und der braune Mond sind direkt nebeneinander abgebildet. Schwarzer Hintergrund.">
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 blau-weiße Erde und der braune Mond sind direkt nebeneinander abgebildet. Schwarzer Hintergrund.“ angezeigt.[12][13]
Ausgabe
[Bearbeiten | Quelltext bearbeiten]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 des Bildes vorlesen.[14]
Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ Best Practices für die Suchmaschinenoptimierung für Google Bilder. Abgerufen am 2. März 2021.
- ↑ a b Textalternativen für Bilder - BITV-Lotse. Archiviert vom am 18. Januar 2018; abgerufen am 22. März 2024.
- ↑ Sarah Kitza: Gestaltung von Alternativtexten – eine empirische Studie aus Nutzerinnen- und Nutzersicht. Hrsg.: TU Dortmund. 2015 (barrierefreies-webdesign.de [PDF; 2,3 MB]).
- ↑ Startseite BITV-Lotse - Barrierefreie Informationstechnik-Verordnung – BITV 2.0 - BITV-Lotse. Archiviert vom am 13. März 2016; abgerufen am 22. März 2024.
- ↑ a b c d Wie schreibe ich einen guten Alternativtext für Blinde? 9. August 2020, abgerufen am 4. Januar 2021 (deutsch).
- ↑ Textalternativen für Bilder - BITV-Lotse. Archiviert vom am 18. Januar 2018; abgerufen am 22. März 2024.
- ↑ 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).
- ↑ Was ist ein ALT-Attribut (ALT-Tag)? - Ryte Wiki. Abgerufen am 4. Januar 2021.
- ↑ a b How to specify alternate text. W3C, abgerufen am 5. Januar 2021 (englisch).
- ↑ It's alt attribute, not alt tag. In: 456 Berea Street. 7. November 2005, abgerufen am 25. August 2022.
- ↑ 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
[Bearbeiten | Quelltext bearbeiten]- 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)