Textalternativen für Bilder – wozu?

Bilder und grafische Elemente sind unerlässlich für die Gestaltung eines Webauftritts. Sie lockern das Layout auf, sie machen Inhalte besser verständlich, erwecken Neugier. Sie können die Sichtbarkeit und Wirksamkeit Ihrer Bilder und Ihrer Website durch gute Alternativtexte für Ihre Bilder noch verbessern. Mit einem treffenden Alternativtext werden Inhalt und Funktion eines Bildes auch dann wahrgenommen, wenn das Bild selbst nicht gesehen und ausgewertet werden kann. Das trifft sowohl auf blinde und stark sehbehinderte Menschen wie auch auf Suchmaschinen zu. Im folgenden Beitrag erfahren Sie, wann und wie Sie die Wirksamkeit von Bildern auf einer Website durch das Hinzufügen von Alternativtexten verbessern.

Alternativtexte: Nutzen für SEO

Das Internet bietet Ihnen die Möglichkeit, Ihr Informations- und Produktangebot sehr vielen Menschen zu präsentieren. Damit diese Chance zu einem realen Vorteil für Sie wird, müssen potenzielle Interessenten Ihr Angebot in einem unendlichen Meer von Informationen leicht finden können. Das bedeutet, dass Ihr Angebot von den Suchmaschinen, allen voran Google, gefunden und möglichst gut auf den Suchergebnisseiten platziert wird – oder anders ausgedrückt, Ihre Website ein gutes Ranking erhält.

Suchmaschinen bestimmen die Relevanz von Webseiten für eine bestimmte Suchanfrage auf Basis vieler technischer, struktureller und inhaltlicher Faktoren. Aber Suchmaschinen können Bilder, die in der Kommunikation doch eine so bedeutende Rolle spielen, nicht sehen und nicht auswerten. Wenn Sie Suchmaschinen also nicht dabei unterstützen, die inhaltliche Bedeutung Ihrer Bilder zu erkennen, haben wichtige Teile Ihrer Website kein Gewicht beim Ranking.

In HTML gibt es die Möglichkeit, Bilder mit einer kurzen Beschreibung zu versehen. Dieser Alternativtext ist für Suchmaschinen gut auswertbar. Auch wenn die Faktoren, die Suchmaschinen für das Ranking der Suchergebnisse heranziehen, nicht im Einzelnen bekannt sind, weisen SEO-Experten darauf hin, dass das Vorhandensein und die Qualität von Bildbeschreibungen zu einer besseren Platzierung der Seite im Suchergebnis führen.

Erfreulicherweise bieten viele Redaktionssysteme (Content-Management-Systeme/CMS) und Blog-Software (z.B. Wordpress) komfortable Möglichkeiten zur Eingabe des Alternativtextes. Aus Sicht der Suchmaschinenoptimierung ist es daher sehr empfehlenswert, im Rahmen der Onpage-Optimierung dem Alternativtext für Bilder gebührend Aufmerksamkeit zu schenken.

Nutzen für Accessibility

Blinde und stark sehbeeinträchtigte Menschen sind in derselben Lage wie Suchmaschinen: Sie können Bilder nicht sehen und auswerten. Aber Bildbeschreibungen können mit speziellen Hilfsprogrammen (Screenreadern) ausgelesen werden. Wenn Ihre Bilder also mit aussagekräftigen Alternativtexten versehen sind, können sich Nicht-Sehende ganz einfach vorlesen lassen, was Sie mit Ihren Bildern sagen möchten.

Weiterer Nutzen

Neben dem zweifachen Nutzen für Suchmaschinen und Screenreader-Programme gibt es noch weitere Szenarien, in denen Alternativtexte den Informationsgehalt Ihrer Webseite unterstützen. Sie werden angezeigt, wenn die Bilddatei aus irgendwelchen Gründen nicht geladen werden kann, zum Beispiel, weil ein Nutzer Bilder nicht automatisch im Browser oder im Mailprogramm anzeigen lässt.

Wohin mit dem Alternativtext?

Es gibt verschiedene Möglichkeiten, ein Bild mit Alternativtext zu versehen. Um im Einzelfall die geeignete Form zu finden, muss zuerst geklärt werden, ob die wesentlichen Merkmale des Bildes in wenigen Worten, mit maximal 100 Zeichen, beschrieben werden können. Bei komplexen Info-Grafiken, unter Umständen auch bei Fotos mit wichtigen Details oder bei der Abbildung von Kunstwerken, reichen 100 Zeichen nicht aus. In diesen Fällen muss ein kurzer Alternativtext, der ein Identifizieren des Bildes ermöglicht, ergänzt werden durch eine ausführlichere Beschreibung.

Das alt-Attribut des Bild-Elements <img>

Dieses Attribut ist der wichtigste Ort für Alternativtext. Es ist geeignet für kurze Beschreibungen von maximal 100 Zeichen. Redaktionsprogramme und Blog-Software bieten beim Einbinden von Bildern die Möglichkeit, hier einen Alternativtext einzutragen. Jedes <img>-Element muss ein alt-Attribut besitzen. Unter bestimmten Umständen kann das alt-Attribut leer bleiben (alt=""), aber es darf nie ganz weggelassen werden. Der im alt-Attribut angegebene Text wird von Software (Screenreadern und Suchmaschinen) ausgewertet, ist aber auf der Webseite nicht sichtbar.

<img src="rose.jpg" alt="Rose Pierre de ronsard: eine rosa blühende Kletterrose">

Bild kann geladen werden

Bild kann nicht geladen werden.

Erläuterung und Screenreader-Ausgabe (Beispiel 1):

Das <figcaption>-Element

Im Gegensatz zum Text im alt-Attribut wird eine Beschriftung mit <figcaption> über oder unter der Abbildung angezeigt. Wenn diese Beschriftung die wesentlichen Inhalte des Bildes benennt, kann das alt-Attribut leer bleiben. Besonders reizvoll an <figcaption> ist, dass dieses Element auch für detailliertere Beschreibungen verwendet werden kann. So kann ein Diagramm – für alle sichtbar – mit einer Tabelle ergänzt werden, die die zugrunde liegenden Daten enthält. Oder man kann einer Anfahrtsskizze eine textliche Wegbeschreibung hinzufügen. Redaktionsprogramme unterstützen die Eingabe dieser Bildunterschriften in ihren Editoren. Für die Suchmaschinenoptimierung sind Bildunterschriften besonders wichtig, weil sie direkt über oder unter dem Bild angezeigt werden und dadurch den Bedeutungsgehalt des Bildes heben.

<figure role="group">
    <img src="rose.jpg" alt="" />
    <figcaption>Pierre de Ronsard</figcaption>
 </figure>

Anzeige: figcaption, leeres alt-Attribut, wenn Bild geladen werden kann.

Anzeige: figcaption, leeres alt-Attribut, wenn Bild nicht geladen werden kann.

Erläuterung und Screenreader-Ausgabe (Beispiel 2a):

<figure role="group">
    <img src="rose.jpg" alt="eine rosa blühende Kletterrose" />
    <figcaption>Rose Pierre de Ronsard</figcaption>
 </figure>

Anzeige figcaption und Alternativtext im alt-Attribut, wenn Bild nicht geladen werden kann

Erläuterung und Screenreader-Ausgabe (Beispiel 2b):

Das longdesc-Attribut des Bild-Elements

Dem <img>-Element kann zusätzlich zum alt-Attribut ein longdesc-Attribut beigefügt werden. Dieses enthält einen Link zu einer Webseite, auf der die Abbildung ausführlich beschrieben wird. Dieser Link ist allerdings nur Screenreader-Nutzern zugänglich.

<img src="rose.jpg" alt="Rose Pierre de Ronsard: eine rosa blühende Kletterrose" 
longdesc="beschreibung_rose.html">

Anzeige Beispiel longdesc-Attribut

Erläuterung und Screenreader-Ausgabe (Beispiel 3):

Normaler Text-Link zur Beschreibung

Bei komplexen Infografiken profitieren auch sehende Besucher der Webseite von ausführlicheren Beschreibungen. In vielen Fällen ist es daher sinnvoll, statt des longdesc-Attributs einen normalen, für alle Nutzer sichtbaren Text-Link einzusetzen, der zu einer detaillierten Beschreibung führt.

<figure role="group">
  <img src="rose.jpg." alt=""/>
  <figcaption> 
  Rose Pierre de Ronsard
  <a href="beschreibung_rose.html">Beschreibung der Rose Pierre de Ronsard</a>
  </figcaption>
</figure>
 

Anzeige mit Text-Link

Erläuterung und Screenreader-Ausgabe (Beispiel 4):

Beschreibung im Kontext: aria-describedby

Die einfachste und wirksamste Möglichkeit ist, ein komplexes Bild im umgebenden Text zu beschreiben. Mit aria-describedby kann auf die Stelle verwiesen werden, an der das Bild beschrieben wird.

<div role="dialog">
 <button aria-label="Schliessen" aria-describedby="descriptionClose"
 onclick="myDialog.close()">X</button>
 <h2>Abonnieren Sie unseren Newsletter!</h2>
 <label>Name:<input type="text"></label>
 <label>E-Mail: <input type="email"></label>
 <button type="submit">Jetzt anmelden</button>
</div>
<p class="hidden" id="descriptionClose">
Dieser Schalter löscht Ihre Eingaben, ohne sie zu speichern,
und bringt Sie zurück zum Hauptinhalt.</p>

Beispiel für Beispiel Verwendung aria-describedby

Erläuterung und Screenreader-Ausgabe (Beispiel 5):

Treffende Alternativtexte für verschiedene Bildtypen

Gute Alternativtexte geben den Informationsgehalt eines grafischen Elements wieder. Die Schlüsselfrage lautet also: Wieviel Information vermittelt ein Bild oder ein Symbol in einem bestimmten Kontext? Und welche Art von Information? Wenn wir verstehen, was und wie viel es zum Verständnis des Inhalts beiträgt, ergib sich die passende Vorgehensweise für den Alternativtext fast von selbst.

Typ 1: Informative Bilder in Links und Schaltflächen

Es gibt Bilder, die viel zum Verständnis des Inhalts beitragen. Der Alternativtext muss dann die wesentlichen Bildinhalte wiedergeben, damit nicht-sehende Menschen und Suchmaschinen Zugang zu diesen Informationen erhalten. Bei informativen Bildern in Links und Schaltflächen (Typ 1) besteht der Bildinhalt im Link-Ziel oder in der Funktion der Schaltfläche. Die grafischen Details sind unwichtig.

Beispiele:

• ein Such-Schalter mit Lupen-Symbol, ohne Text

• ein Schalter mit einem X zum Schließen eines Dialogs

• ein unbeschrifteter Link mit dem Symbol eines Briefkuverts, der ein Mailformular öffnet

• ein grafisches Symbol in einem Download-Link informiert darüber, in welchem Dateiformat der Download bereitgestellt wird

• ein Logo als Link zur Website der betreffenden Firma oder Organisation

• ein Webseiten-Screenshot als Link zur Website der betreffenden Firma oder Organisation

• das Bild einer Broschüre als Download-Link

• das Bild ist Teil eines Links oder einer Schaltfläche

• das Bild gibt allein Auskunft über die Funktion des Elements oder trägt wesentlich zur Information darüber bei. Es gibt keinen HTML-Text, der über die Funktionalität informiert. Deshalb können nur Menschen, die das Bild oder das Symbol sehen können, diese Funktionalität erkennen und nutzen. Wenn dem Bild eine Bildbeschreibung beigegeben wird, haben auch Screenreader-Programme Zugang zu dieser Information und können sie nicht-sehenden Nutzern zur Verfügung stellen.

Merkmale:

• Das Bild ist Teil eines Links oder einer Schaltfläche.

• Das Bild gibt allein Auskunft über die Funktion des Elements oder trägt wesentlich zur Information darüber bei. Es gibt keinen HTML-Text, der über die Funktionalität informiert. Deshalb können nur Menschen, die das Bild oder das Symbol sehen können, diese Funktionalität erkennen und nutzen. Wenn dem Bild eine Bildbeschreibung beigegeben wird, haben auch Screenreader-Programme Zugang zu dieser Information und können sie nicht-sehenden Nutzern zur Verfügung stellen.

Lösung:

Das alt-Attribut der Grafik enthält die Beschreibung des Link-Ziels oder der Funktion der Schaltfläche. Die konkreten Details des Bildes sind nicht relevant.

<label for="search" class="hidden">Suchbegriff</label>
<input type="text" id="search"/>
<button type="submit">
   <img alt="Suchen" src="search-icon.png">
</button>

Bildbeispiel: Such-Schalter mit Lupen-Symbol

Erläuterung und Screenreader-Ausgabe (Beispiel 6a):

<a href="#">
  Broschüre "Unsere Rosen"
  <img alt="(im pdf-Format)" src="buttons/pdf.jpg">
</a> 

PDF-Symbol im Download-Link

Erläuterung und Screenreader-Ausgabe (Beispiel 6b):

Tipp: Es ist nicht nötig, dass der Alternativtext die Angabe "Link: " oder "Bild: " enthält. Diese Informationen werden vom Screenreader automatisch ermittelt und weitergegeben.

Tipp: Die Angaben "Logo" oder "Screenshot" sind bei unverlinkten Bildern nützlich. Bei Bild-Links ist nur das Link-Ziel von Interesse, also z. B. "Zu akademie.de".

Tipp: Wenn ein Symbol mithilfe einer schriftartenbasierten Icon-Sammlung erzeugt wird, zum Beispiel mit Font Awesome Icons, kann kein alt-Attribut eingesetzt werden. In diesem Fall wird der Alternativtext ins title-Attribut des Links geschrieben und das Symbol selbst erhält die-Eigenschaft aria-hidden="true". Die Information über den Link-Zweck wird an Screenreader und Suchmaschinen weitergegeben, das grafische Symbol wird vor Screenreadern verborgen.

<label for="search" class="hdden">Suchbegriff</label>
<input type="text" id="search"/>
<button title="Suchen" type="submit">
 <i class="fa fa-search" aria-hidden="true"></i>
<button>:

Beispiel für ein Such-Schalter bestehend aus einem Font-Icon

Erläuterung und Screenreader-Ausgabe (Beispiel 7):

Typ 2: Informative Bilder, die nicht verlinkt sind

Ganz anders sieht es aus bei informativen Bildern, die nicht verlinkt sind (Typ 2): bei dieser Art von Bildern geht es um das, was das Bild zeigt und was das Bild bewirken soll.

Beispiele:

• ein Telefon-Symbol, das als Beschriftung für die folgende Ziffernfolge dient

• ein Sternchen, das Pflichtfelder in einem Formular kennzeichnet

• ein Diagramm, das die Entwicklung von Besucherzahlen zeigt

• ein Diagramm, das das Wahlverhalten verschiedener Bevölkerungsgruppen vergleicht

• eine Anfahrtsskizze

• ein Foto in einer Theaterkritik, das eine bestimmte Szene zeigt

• die Abbildung eines Gemäldes in einem Beitrag über Malerei des 20. Jahrhunderts

Merkmale:

• Das Bild ist nicht Teil eines Links oder einer Schaltfläche.

• Das Bild gibt Informationen, die im umgebenden Text nicht enthalten sind.

Lösung:

Die wesentlichen Merkmale (Funktion und Inhalt) des Bildes müssen im alt-Attribut beschrieben werden. Bei Bildern, die viele wichtige Details enthalten, und bei komplexen Info-Grafiken ist zusätzlich eine detailliertere Beschreibung notwendig.

• Symbole, die als Beschriftung dienen: das alt-Attribut enthält den Beschriftungstext, der durch das Bild ersetzt wurde (z. B. "Telefonnummer: ").

• Diagramme: Das alt-Attribut enthält den Typ und Titel des Diagramms. Bei komplexen Diagrammen wird eine zusätzliche Beschreibung angeboten. (s. u. Beispiel 8a: einfaches Diagramm; s. u. Beispiel 8b: komplexes Diagramm).

• Illustrative Bilder: Im alt-Attribut sollten die Bildgattung (z. B. "Foto: ") sowie wesentliche Merkmale des Bildinhalts angegeben werden; bei Fotos von Menschen der Name der Personen und die abgebildeten Handlungen/Situationen. Interessant sind auch auffällige Details oder Merkmale, die für den Kontext wichtig sind. Eventuell wird eine ausführlichere Beschreibung bereitgestellt.

• Bilder von Kunstwerken: Im alt-Attribut sollten Titel und Art des Werks genannt werden (Gemälde, Skulptur, Collage …) und der Name des Künstlers oder der Künstlerin. Von Interesse sind auch Epoche und Stil. Im Einzelfall muss entschieden werden, ob eine ausführlichere Beschreibung nötig ist.

<img scr="besucherzahlen.jpg" alt="Diagramm: Entwicklung 
der Besucherzahlen vom Jahr 2015 (9.816 Besucher) 
bis zum Jahr 2017 (17.803 Besucher)"/>

Diagramm: Alternativtext im alt-Attributbildxxx

Erläuterung und Screenreader-Ausgabe (Beispiel 8a):

<figure role="group"> 
 <img src="besucherzahlen.jpg" alt="Säulendiagramm" />
<figcaption>
<h2>Besucherzahlen von 2015 bis 2017</h2>   
 <table>      
  <thead>        
   <tr>          
     <th scope="col">Jahr</th>
     <th scope="col">Besucherzahl</th>        
   </tr>
  </thead>
  <tbody>        
   <tr>          
    <td>2015</td>
    <td>9.816</td>
   </tr>
   <tr>
    <td>2016</td>
    <td>13.234</td>
   </tr>
   <tr>
    <td>2017</td>
    <td>17.803</td>
   </tr>
  </tbody>
</table>
</figcaption>
</figure>

Diagramm: Daten in figcaption

Erläuterung und Screenreader-Ausgabe (Beispiel 8b):

Dekorative Bilder

Es gibt aber auch Bilder, die sehr wenig oder gar nichts zum Verständnis des Inhalts beitragen. Da sie keine Information vermitteln, sollten dekorative Bilder – egal, ob sie in Links enthalten sind (s.u. Typ 3) oder nicht (s.u. Typ 4) – von Screenreadern ignoriert werden können. Dies ist am einfachsten zu erreichen mit einem leeren alt-Attribut (alt=""). Achtung: Hier sind nicht nur Bilder im engeren Sinn gemeint, wie z. B. Fotos oder Info-Grafiken, sondern auch grafische Symbole und Schriftgrafiken.

Typ 3: Dekorative Bilder in Links und Schaltflächen

Achtung: Wenn hier von Text die Rede ist, ist echter HTML-Textinhalt gemeint, keine Schriftgrafik!

Beispiele:

• ein Such-Schalter mit Lupen-Symbol und dem Text "Suchen"

• ein Schalter trägt die Aufschrift "Zur Kasse" und das Symbol eines Häkchens

Merkmale:

• Das Bild ist Teil eines Links oder einer Schaltfläche.

• Die Schaltfläche enthält Text, der eine vollständige Information über die Aktion darstellt, die durch Anklicken des Links oder der Schaltfläche ausgelöst wird. Das Bild fügt dieser Information nichts hinzu. Es ist rein dekorativ.

Lösung:

Das alt-Attribut bleibt leer. So können Screenreader das grafische Element ignorieren.

Typ 4: Dekorative Bilder, die nicht verlinkt sind

Beispiele:

• grafische Elemente, die nur dem Layout dienen (Linien, Schatten, runde Ecken)

• das stilisierte Bild eines Vogels in der Überschrift "Tipps für Vogelbeobachtung"

• ein Foto von zwei Geschäftsleuten, die sich die Hand schütteln, über der Überschrift "Unsere Leistungsgarantie"

• nach oben

Merkmale:

• Das Bild ist nicht Teil eines Links oder einer Schaltfläche.

• Das Bild trägt zum Informationswert der Seite gar nicht oder nur sehr geringfügig bei.

Lösung:

Das Bild sollte vor Screenreadern verborgen werden. Am einfachsten wird dies durch ein leeres alt-Attribut erreicht. [Beispiel 9a: Such-Schalter mit Lupen-Symbol und Text; Beispiel 9b: Schmuckgrafik in Überschrift]

<button type="submit">
<img alt="" src="search-icon.png">Suchen</button>

Such-Schalter mit Lupen-Symbo und Text

Erläuterung und Screenreader-Ausgabe (Beispiel 9a):

<p><i class="fa fa.envelope-o" areia-hidden="true"></i>
Mail: me@myoffice.com<p>
<p><i class="fa fa-phone" aria-hidden="true"></i>
Telefon: +43 (0)664</p>

Beispiel für eine Schmuckgrafik

Erläuterung und Screenreader-Ausgabe (Beispiel 9b):

Tipp: Hervorhebungen

Wenn Sie Text hervorheben möchten, sollten Sie dafür HTML-Elemente verwenden, die die Wichtigkeit der Information auch für Suchmaschinen und Screenreader erkennbar machen. Wenn Textstücke durch einen Rahmen visuell hervorgehoben werden, ist es sinnvoll, dem Text eine Überschrift zu geben, z. B. "Tipp:" oder "Neue Features:". Wenn Worte oder Satzteile durch Fettdruck hervorgehoben werden sollen, sollte hierfür das <strong>-Tag verwendet werden, das Text als wichtig kennzeichnet.

Gute Alternativtexte formulieren: inhaltliche Merkmale

Die inhaltliche und sprachliche Gestaltung von Alternativtexten ist mit einigen redaktionellen Entscheidungen verbunden.

Alternativtexte sollen den gleichen Zweck erfüllen wie die Bilder, denen sie zugeordnet sind. So wollen es die Web Content Accessibility Guidelines (WCAG 2.0) und die Barrierefreie Informationstechnik-Verordnung (BITV 2.0, gültig in Deutschland).

Aber was ist "der gleiche Zweck"? Was ist der Inhalt eines Bildes? Natürlich wissen Sie ganz genau, weshalb Sie ein bestimmtes Bild ausgewählt haben. Aber wie können Sie dieses Wissen in einen knappen Alternativtext verpacken? Folgende Aspekte sind wichtig:

• Die konkreten Details: Was ist auf dem Bild zu sehen?

• Der Bildkontext: In welchem Rahmen setzen Sie dieses Bild ein? Mit welchen Textinformationen kombinieren Sie es?

• Der Informationswert: Welche Information(en) sind nur in diesem Bild enthalten, nicht im Text der Webseite?

• Die kommunikative Absicht: Weshalb haben Sie es ausgewählt? Welche Information und/oder Emotionen möchten Sie damit vermitteln?

Für ein und dasselbe Bild können, je nach Kontext, ganz unterschiedliche Alternativtexte geeignet sein.

Wie umfangreich soll die Beschreibung sein?

Grundsätzlich sollte der Alternativtext kurz sein und sich auf wesentliche Merkmale beschränken. Wie umfangreich aber die Text-Alternative zu einem bestimmten Bild sein sollte, hängt vom Kontext ab und von der Absicht, die der Autor oder die Autorin mit diesem Bild verfolgt.

Beispiel:

Wenn die Abbildung eines Buchcovers im Rahmen eines Beitrags über aktuelle Tendenzen des Buchmarkts vorkommt, ist es ausreichend, wenn im alt-Attribut die Informationen "Buchcover", Buchtitel und Autor/Autorin genannt werden. Wenn dasselbe Bild in einem Beitrag über die Gestaltung von Buchcovern verwendet wird, kann es sinnvoll sein, eine ausführlichere Beschreibung anzubieten.

Sachlich oder emotional?

Laut WCAG 2.0 soll der Alternativtext möglichst objektiv sein. Oft werden Bilder aber in der Absicht eingesetzt, eine bestimmte Emotion auszulösen oder einen bestimmten Eindruck, eine bestimmte Wirkung zu erzeugen. Sehende betrachten ein Bild und dies lässt sie lächeln, lässt sie an einen romantischen Abend denken, weckt die Hoffnung auf entspannte Familienferien, löst Schrecken, Empörung oder Wut aus. Bei Nicht-Sehenden ist es nicht anders, auch wenn die auslösenden Informationen nicht visuell aufgenommen werden.

Natürlich haben Nicht-Sehende, ebenso wie Sehende, unterschiedliche Bedürfnisse und Vorlieben. Aber die meisten Screenreader-Nutzer bevorzugen einen knappen, möglichst sachlichen Stil für Alternativtexte. Auch Suchmaschinen können mit objektiv formulierten Alternativtexten gut umgehen.

Objektivität verträgt sich durchaus mit anschaulichen Schilderungen: Sichtbare Gefühlsäußerungen der abgebildeten Personen können benannt werden. Aber die redaktionelle Absicht muss im Alternativtext nicht explizit gemacht werden.

Beispiel:

Ein Hotelbetrieb will mit Familienfreundlichkeit punkten. In dieser Absicht wird das Foto einer Familie am Swimmingpool gezeigt. Alle haben offenbar Spaß, lachen, wirken entspannt. Der Alternativtext könnte lauten: "Lachende Familie an unserem Swimmingpool". Diese Beschreibung geht ein wenig über eine ganz objektive Schilderung der Gesichtsausdrücke oder Handlungen hinaus. Hier wird versucht, mit Worten einen ähnlichen Eindruck zu erzeugen wie mit dem Bild. Damit wird der Alternativtext der Funktion des Bildes gut gerecht. Weniger sinnvoll wäre es, direkt in den Alternativtext zu schreiben: "Wir sind familienfreundlich!" Diesen letzten gedanklichen Schritt können nicht-sehende Menschen ebenso machen wie sehende.

Informativ oder dekorativ?

Natürlich ist es im Einzelfall schwierig zu entscheiden, wo genau Information aufhört und wo reine Dekoration beginnt.

Bei grafischen Elementen, die ausschließlich dem Layout dienen, ist die Sache recht klar. Solche Grafiken sollten aber kaum mehr vorkommen, da HTML5 und CSS3 viele grafische Gestaltungsmöglichkeiten bieten.

Bei Diagrammen und Wegskizzen ist die Sache auch recht klar. Hier wird ein wesentlicher Teil der Information grafisch vermittelt und muss deshalb nicht-sehenden Nutzern in sprachlicher Form zugänglich gemacht werden.

Viel schwieriger ist die Entscheidung bei Teaser-Grafiken oder Elementen, die vor allem dazu bestimmt sind, visuelle Aufmerksamkeit zu erregen ("eye candy"). Solche Bilder fügen dem Seiteninhalt keine wichtige (Detail-)Information hinzu, aber sie haben doch eine gewisse kommunikative Funktion.

Wenn Sie meinen, dass eine Teaser-Grafik keinerlei eigenen Inhalt transportiert, können Sie das alt-Attribut leer lassen. Das ist auch eine gute Lösung, wenn Sie diese Grafik in einen Link oder eine Überschrift einfügen. Wenn Sie mit der Teaser-Grafik aber auch zusätzliche Details zeigen oder eine bestimmte Wirkung erzielen wollen, ist es sinnvoll, einen kurzen beschreibenden Text ins alt-Attribut zu setzen.

Beispiel:

In einem Bericht über Gewürze kann ein Foto von Zimtrinde informativen Wert haben, wenn damit die Unterschiede zwischen Ceylon-Zimt und Cassia-Zimt illustriert werden. In diesem Fall sollte der Alternativtext Unterschiede im Aussehen benennen. In einem Blog-Beitrag über Weihnachtsbäckerei könnte dieses Foto einfach als Stimmungsmacher eingesetzt werden, ohne der Seite irgendwelche Informationen hinzuzufügen. Aber auch blinde Menschen wissen, wie sich Zimtrinde anfühlt, sie kennen den Duft von Zimt und sie verbinden Erinnerungen damit. Weshalb sollten Sie diese sinnliche Vorfreude nicht mit allen Leserinnen und Lesern teilen?

Fazit: Guter Stil in Bild und Text

Mit sorgfältig formulierten Alternativtexten verbessern Sie die Sichtbarkeit Ihres Web-Angebots, sowohl für Suchmaschinen als auch für blinde und stark sehbehinderte Menschen. Der Einsatz von Alternativtexten zwingt Sie auch dazu, sich genauer Gedanken über den Sinn und Zweck der von Ihnen eingesetzten Bilder zu machen. So verbessern Sie nicht nur in technischer Hinsicht Ihre Reichweite und Ihr Ranking, sondern heben gleichzeitig auch die allgemeine Content-Qualität Ihrer Website an.