Grafiken

Texte können in Schriftart, Größe und Farbe angepasst oder von einem Screenreader vorgelesen werden. Werden Texte als Grafiken umgewandelt, sind solche Anpassungen für den Nutzer nicht mehr möglich. Besonderes Augenmerk ist jedoch Grafiken aller Arten zu widmen. Zu unterscheiden sind Schriftgrafiken, informative Grafiken und Layoutgrafiken.
Stand 18.10.2012

Inhaltsübersicht:

1. Alternativtext und Bildbeschreibung
2. Schriftgrafiken
3. Informative Grafiken
4. Layoutgrafiken

Alternativtext und Bildbeschreibung

Für blinde Nutzer oder für Benutzer eines einfachen Text-Browser sind Grafiken nicht zugänglich. Deshalb muss für ein barrierefreies bzw. barrierearmes Webdesign über das alt-Attribut ein Alternativtext hinterlegt werden. Dieser soll die Aussage des Bild-Elementes wiedergeben und somit das Grafikelement ersetzen können. Das alt-Attribut ist auf lange Ladezeiten zurückzuführen. Es wird angezeigt, wenn eine Grafik nicht geladen werden kann (weil bspw. die Anzeige von Bildern deaktiviert ist) bzw. wenn die Ladezeit besonders hoch ist. Die Zeichenlänge innerhalb des alt-Attributes sollte möglichst kurz gehalten werden.

Für längere Beschreibungen steht zusätzlich das title-Attribut zur Verfügung. In diesem kann eine etwas ausführlichere Beschreibung des Bildinhaltes hinterlegt werden. Die Inhalte des title-Attributes werden im Browser als Tooltip beim Maus-Überfahren (engl. Mouse over) des Bildes angezeigt. Einzig der Internet Explorer zeigt auch das alt-Attribut bei Mouse over an - aber nur, wenn nicht zusätzlich das title-Attribut hinterlegt ist.

Das nachfolgend beschriebene longdesc-Attribute ist in HTML5 nicht mehr vorgesehen.

Für ausführlichere Beschreibungen steht theoretisch auch das longdesc-Attribut zur Verfügung. Dieses kann den Namen einer Datei enthalten, in der dann wiederum das Bild umfangreich beschrieben werden kann. Leider wird dieses Attribut bisher kaum unterstützt. Im Firefox kann über das Kontextmenü der Grafik ein Hinweis auf die hinterlegte Beschreibungsdatei ausfindig gemacht werden (rechte Maustaste auf das Bild - Eigenschaften). Im sich dann öffnenden Dialogfenster ist der Verweis im Bereich "Beschreibung" hinterlegt. Wird dieser dann in die Adresszeile des Browser kopiert, ist ein Aufruf der Beschreibungsdatei möglich - eine wirklich umständliche Umsetzung. Wünschenswert wäre, dass Browser bspw. einen Verweis zu der im longdesc-Attribut hinterlegten Datei direkt am Bild ausgeben! Auf amerikanischen Webseiten hat sich die zusätzliche Angabe eines sog. D-Link durchgesetzt, um allen Nutzern den Zugang zur langen Beschreibung zu ermöglichen.

Achtung: Da der Linktext des D-Link nur einen Buchstaben enthält, geben manche Validatoren einen Hinweis aus, der besagt, dass der Linktext ("D") nicht aussagekräftig ist! Problematisch ist diese D-Link-Variante aus Sicht barrierefreier Web-Gestaltung auch, wenn bei mehreren Grafiken auf einer Seite ein solcher "D"-Verweis hinterlegt ist. Dann verweisen nämlich gleiche Linktexte ("D") auf unterschiedliche Ziele (Beschreibungsdatei 1. Grafik, Beschreibungsdatei 2. Grafik usw.)!

Beispiel XHTML-Datei - Attribute für Grafiken (Ausschnitt):

<img src="gebaeude.gif" alt="Die höchsten Gebäude der Welt" title="... Hier kann eine etwas längere Beschreibung des Bildinhaltes stehen ..." longdesc="gebaeude.html" />
<a href="gebaeude.html">D</a>

(ausführliches Beispiel in eigene Datei ausgelagert: Alternativtext und Bildbeschreibung bei Grafiken)

Seitenanfang

Schriftgrafiken

Der größte Vorteil, den Webseiten gegenüber Print-Medien haben, ist die variable Form. Texte, die zu Grafiken umgewandelt wurden, werden als Schriftgrafiken bezeichnet. Schriftgrafiken werden meist eingesetzt, um das Corporate Design zu wahren. Für das Anfertigen einer barrierefreien Website ist diese Anwendung umstritten. Einige Autoren verwenden Bilder, um Text in einer bestimmten Schriftart darzustellen, deren Verfügbarkeit nicht auf allen Nutzeragenten gewährleistet ist. Text, der als Grafik dargestellt wird, kann weder von Spezial-Software wie einem Screenreader noch von Suchmaschinen erfasst werden. Schriftgrafiken können nicht an Benutzeranforderungen angepasst werden, da Farben und Schriftgrößen in Grafiken nicht individuell eingestellt werden können. Schriftgrafiken und Symbole werden häufig für Navigationselemente und Schaltflächen verwendet, sog. Bedienelemente.

Beispiel XHTML-Datei - Bild als Alternative zum Verweistext (Ausschnitt):

<a href="kontakt.html"><img src="briefkasten.gif" alt="Kontakt" /></a>

Oftmals sind neben dem grafischen Verweis gleichwertige Textverweise angeordnet. In diesem Fall ist ein leeres alt-Attribut zu notieren, da das grafische Navigationselement dann nur dekorativen Charakter hat (siehe auch Grafiken ohne Informationsgehalt.

Beispiel XHTML-Datei - Bild und Text als Verweistext (Ausschnitt):

<a href="kontakt.html"><img src="briefkasten.gif" alt="" /> Kontakt</a>

Eine weitere Ausnahme ist das Verwenden von Schrift im Logo. Solange dieses nicht als Überschrift oder Bedienelement eingesetzt wird, ist das Einbinden von Schriften nicht untersagt.

Seitenanfang

Informative Grafiken

Ebenso wie für grafische Bedienelemente ist es für informative Grafiken wichtig, einen Alternativtext zu hinterlegen. Informative Grafiken unterstützen den Inhalt und das Thema der Webseite. Für Schriften ist der entsprechende Text zu notieren, für Symbole und Logos ist deren Bedeutung wiederzugeben, Fotos sollten knapp beschrieben werden.

Beispiel XHTML-Datei - Informative Grafiken (Ausschnitt):

<img src="gebaeude.gif" alt="hier steht der Alternativtext" title="hier steht eine etwas längere Beschreibung des Bildinhaltes" />

Die Bedeutung eines Bildes kann auch im Kontext näher beschrieben werden. Wichtig ist, dass die Beschreibung dem Bild eindeutig zugeordnet werden kann. In diesem Fall ist in den Attributen des Bildes nur eine kurze Bezeichnung des im Kontext näher beschriebenen Gegenstandes notwendig.

Farbblinde und sehbehinderte Nutzer können Farben nur eingeschränkt wahrnehmen, so dass Informationen, die ausschließlich über die Farbe vermittelt werden, noch anderweitig hervorgehoben werden müssen. Verschiedenfarbige Linien in Grafiken können bspw. zusätzlich über die Linienart unterschieden werden. Informative Grafiken müssen desweiteren auch vor wechselndem Hintergrund erkennbar sein, was beim Setzen von anwenderspezifischen Hintergrundfarben teilweise nicht gegeben ist. Grafiken mit transparentem Hintergrund sind meist für helle Hintergrundfarben optimiert und auf schwarzem Bildschirm nicht mehr erkennbar.

Ein weiterer wichtiger Aspekt im Bereich von Grafiken ist der Einsatz animierter Bilder. Flackernde, blinkende oder sich bewegende Elemente ziehen die Aufmerksamkeit des Benutzers auf sich. Das kann sowohl zu Konzentrationsschwierigkeiten führen als auch bei Nutzern mit photosensitiver Epilepsie Anfälle auslösen. So lange der Nutzer keine Möglichkeit hat, solche Elemente abzustellen, sind diese zu vermeiden.

Seitenanfang

Layoutgrafiken

Für das Verwenden von Layoutgrafiken, welche ausschließlich ausschmückenden Charakter haben, gibt es zwei Anwendungsbereiche. Einerseits können Bilder eingesetzt werden, um einen Text visuell zu unterstützen. Genaue Informationen können aus einer solchen Grafik nicht entnommen werden und es reicht, die Grafik kurz und allgemein zu beschreiben.

Beispiel XHTML-Datei - Layoutgrafik zur visuellen Unterstützung (Ausschnitt):

<p><img src="pflanze1.gif" alt="eine Pflanze" />
Text über Pflanzen, die Natur ...</p>

Grafiken ohne Informationsgehalt

Anders ist es bei Layoutgrafiken wie Abstandshalter, Farbflächen oder Muster. Diese Grafiken haben keinen Informationsgehalt, benötigen daher auch keinen Alternativtext und sind mit einem leeren alt-Attribut auszuzeichnen.

Für Nutzer eines Screenreader ist das leere alt-Attribut besonders wichtig. Würde gar kein alt-Attribut notiert sein, liest der Screenreader den Namen des Bildes vor. Das kann zu endlosen Listen mit überflüssigen Bilddateinamen führen und den Nutzer erheblich beeinträchtigen. Ist in diesen Fall ein leerer Alternativtext notiert, wird das Bild als Layoutgrafik erkannt und übersprungen.

Beispiel XHTML-Datei - Layoutgrafik als Platzhalter (Ausschnitt):

<p><img src="pflanze1.gif" alt="" />
Text über Pflanzen, die Natur ...</p>

Seitenanfang