Bevor auch nur eine einzige Codezeile geschrieben wird, muss man sich Gedanken über den Sinn eines Bildes und seine Verwendung machen. Wenn man sich Fragen zum Zweck und Kontext des Bildes stellen, kann man ermitteln, wie die Informationen einer Person mithilfe von Hilfsmitteln wie Screenreadern am besten vermittelt werden können.
Solche Fragen können sein:
- Ist das Bild unerlässlich, um den Kontext der Funktion oder Seite zu verstehen?
- Welche Art von Information soll das Bild vermitteln?
- Ist das Bild einfach oder komplex?
- Weckt das Bild Emotionen oder fordert es den Nutzer zum Handeln auf?
- Oder ist das Bild nur optisch ansprechend und ansonsten sinnlos?
Mehr dazu etwas weiter unten im Text.
Über den Alt-Text stellt man sicher, dass wichtige Bilder von allen wahnehmbar sind. Jeder nicht-textbasierte Inhalt braucht eine Text-Alternative. Meistens sind damit Bilder gemeint, aber es könnte sich um jede Art von Medien handeln.
Das Weglassen von alternativem Text kann Screen Reader Nutzer verwirren und die Nutzbarkeit der Seite verschlechtern. Im Zweifelsfall sollte auf jeden Fall ein Text hinterlegt werden. Nutzer können Ihre Bildbeschreibungen überspringen, wenn sie sie für redundant oder zu ausführlich erachten, sie können sich aber keine Beschreibungen vorstellen, die es gar nicht gibt.
Das Schreiben von alternativem Text hat einige Vorteile. Assistive Technologien lesen den Text vor und das hilft dem Nutzer den Zweck des Bildes zu verstehen. Alt-Text wird außerdem auch angezeigt, wenn Bilder nicht laden. Und zuletzt hilft der Alt-Text auch Kontext für Suchmaschinen bereitzustellen, was für SEO gut ist.
- Stelle eine entsprechende Beschreibung bereit.
- Lasse das alt-Attribute bei Bildern, die nur dekorativ sind, leer. So ein leeres alt-Attribut wird vom ally Theme automatisch ausgegeben.
- Benutze keine zu langen Beschreibungen, damit die Aufmerksamkeit nicht vom hauptsächlichen Zweck des Bildes abgelenkt wird.
Fragen, die beim Schreiben von alternativem Text bei Bildern helfen:
- Ist es redundant (überflüssig zum Verstehen des Inhalts)?
- Macht es etwas wenn ich damit interagiere?
- Was ist der Kontext?
Wenn die Antwort auf eine Frage nein ist, geht man zur nächsten Frage weiter. Ist die Antwort ja, versucht man mit Hilfe der Frage zu überlegen, was man in das alt-Attribut schreibt.
Ist es redundant (überflüssig zum Verstehen des Inhalts)?
Redundante Bilder sind solche, die man entfernen kann ohne Kontext zu verlieren. Man behält den Zugang zu wesentlichen Informationen. Das Bild ist nur eine visuelle Hilfe. Manchmal steht die Beschreibung oder der Kontext zum Bild direkt um das Bild herum. In diesem Fall sollte man das alt-Attribut leer lassen.
Beispiele redundanter Bilder
- Auf einer Firmenwebseite gibt es eine Seite “Unsere Führungsetage” auf der alle Chefs gelistet sind. Darauf sind Portraits aller Chefs mit ihren Namen direkt unter dem Bild.
- Bilder, die das Layout unterstützen, z.B. Abstände zwischen Inhalten
- Icons die keinen semantischen Wert hinzufügen sondern nur visuell unterstützen, z. B. das Twitter Icon mit dem Wort “Twitter” direkt daneben.
Macht es etwas wenn ich damit interagiere?
Führt das Bild eine Funktion aus? Das typischste Beispiel hierfür wäre wenn das Bild sich innerhalb eines Buttons oder Links befindet. Wenn das Bild eine Funktion bedient, sollte dise beschrieben werden. Was würde hier der Linktext sein, wenn dieser Link ein Text wäre und kein Bild? Die Antwort hierauf ist das, was in das alt-Attribut muss.
Zum Beispiel:
<a href="https://twitter.com/Microsoft"><img src="twitter.svg" alt="Microsoft Twitter"></a>
Was ist der Kontext?
Was ist der Kontext? Dies ist eine rhetorische Frage, denn wir wissen es nicht. Wenn man jedoch ein Bild für einen Inhalt aussuchen würde, welcher Kontext ist essentiell um etwas über das Bild zu wissen? Was muss man über das Bild wissen?
Ein Beispiel für den Kontext: Nehmen wir an, wir haben ein Bild von einem Teller mit Essen. Wir könnten dieses Bild sehr unterschiedlich beschreiben, je nachdem, auf welcher Website es sich befindet. Wenn es sich um einen Food-Blog handelt, sollte der alternative Text dazu führen, dass Ihnen das Wasser im Mund zusammenläuft und Sie dieses Gericht sofort zubereiten möchten! Wenn es sich um eine Fitness-Website handelt, geht es wahrscheinlich eher um den Treibstoff für ein effektives Training. Sie werden eher über die Nährstoffe sprechen. Vielleicht wollen sie aber auch einfach nur beweisen, dass gesundes Essen auch lecker sein kann! Das hängt von der Zielgruppe des Blogs ab. Der Kontext des Bildes ist entscheidend.
Artikel zum Thema (02.03.2023): „Are you making these five mistakes when writing alt text?“
1. Some images should use an empty alt attribute
2. Context matters
3. Screen readers and search engines already know that it’s an image
4. Write alt text as simple sentences
5. Don’t repeat captions in alt text
Mehr dazu im Artikel Are you making these five mistakes when writing alt text?
Verlinkte Bilder
Wenn ein Bild verlinkt ist, wird der Text im alt-Attribut des Bildes zum Link-Text:
- Das alt-Attribut beschreibt das Bild: der Link-Text wird dann die Beschreibung des Bildes sein, was vermutlich keinen Sinn macht.
- Kein alt-Attribut: der Link-Text wird der Datei-Name sein (nicht gut!)
- Leeres alt-Attribut: der Link wird keinen Link-Text haben und wird als „Link“ vorgelesen
Deshalb ist die richtige Art und Weise ein verlinktes Bild auszuzeichnen, das alt-Attribut mit der Link-Destination zu befüllen. Wenn das Bild zum Beispiel zu einem Beitrag über das Handbuch des Accessibility-Teams linkt, sollte der alt-Text folgendermaßen lauten: Handbuch des Accessibility-Teams.
Text auf Bildern
Ein Bild sollte keinen Text beinhalten. Wenn das Bild ein Logo mit Text ist, sollte der alternative Text denselben Wortlaut haben.
Mehr dazu: Images of text / W3C
Komplexe Bilder
Diagramme: Damit diese zugänglich für alle sind, muss die komplette Information in den alternativen Text. Es ist doch am besten, wenn diese Information als normaler Text nahe am Diagramm steht. Es hilft allen Nutzern, komplexe Diagramme zu verstehen.
Mehr Möglichkeiten: Complex Images / W3C
Bilder-Gruppen
If there are more then one image to show a piece of information, the text alternative should be about them all, for example a rating system with star images. There is also the possibility to work with figure, role=\“group\“ asnd figcaption but browser support varies.
Mehr dazu: Groups of Images / W3C
Image Maps
Es sollte allgemeinen Kontext für das Link-Set geben, wenn das Bild mehrere klickbare Bereich hat. Jeder individuelle Link sollte auch eine Text-Alternative haben, die den Zweck oder das Ziel des Links beinhaltet.
Mehr dazu: Images Maps / W3C
Hilfe beim Testen
Man kann Bilder auf einer Website mithilfe einer Browsererweiterung oder über die Browsereinstellungen ausblenden und so sehen, ob man den verbleibenden Inhalt noch versteht. Wenn das der Fall ist, handelt es um ein dekoratives Bild.
Z. B. in Chrome:
- Klicke auf die drei horizontalen Streifen oben rechts im Browser.
- Wähle Einstellungen.
- Klicke auf “Datenschutz und Sicherheit”
- Im Bereich Inhalte wähle die Schaltfläche Bilder und dort dann “Websites dürfen keine Bilder anzeigen”
Einige der Inhalte dieses Blogeintrags wurde entnommen aus „The Bootcamper’s Guide to Accessibility„.
Weitere Infomationen
Artikel über Bilder im Online-Kurse „Learn Accessibility“ von web.dev
Zweck und Kontext des Bildes, Dekorative Bilder, Informative Bilder, Funktionale Bilder, Komplexe Bilder, Best Practices für Alternativtexte
WAI Tutorials
The Alt Decision Tree
Zusammenfassender guter Artikel auf gov.uk
Wie man guten Alt-Text schreibt, erklärt dieser Beitrag im Blog der britischen Regierungsbehörde.
Alternative text in action (english)
Alt Text für wissenschaftliche Bilder
Beitrag von Kristin Briney (english), der zeigt, wie man Alt-Text für wissenschaftliche Grafiken schreibt.