Grafiken
Einleitung
Grafiken sind ein wichtiges Element bei der Gestaltung einer Webseite. Sie sagen oft mehr als tausend Worte, transportieren Emotionen und lenken die Aufmerksamkeit. Aus diesen Gründen werden sie von Webentwicklern auch besonders gerne eingesetzt.
Aus der Sicht der Barrierefreiheit haben Bilder jedoch folgende Nachteile:
- Ihr grafischer Inhalt kann von blinden Benutzern nicht erkannt werden
- Die Farben können nicht angepasst werden
Wichtig ist deshalb, dass für jede Grafik durch das alt-Attribut eine Textalternative angeboten wird, die blinden Benutzern und Suchmaschinen den Inhalt erklärt.
<img src="images/img_3012.png" alt="Frau im Rollstuhl vor einer Treppe" />Image-Maps
Wenn ein Bild mehrere Bereiche enthält, welche man als Links markieren möchte, kann man für das Bild eine Image-Map hinterlegen. Dabei sollte man darauf achten, dass für jede <area> eine Textalternative im alt-Attribut angeboten wird.
<img src="/images/accessibility360.jpg" usemap="#acc360" /> <map name="acc360" id="acc360"> <area shape="circle" coords="211,55,45" href="mobile.html" alt="Mobile Nutzer"/> <area shape="circle" coords="316,95,45" href="suchroboter.html" alt="Suchmaschinen"/> <area shape="circle" coords="320,320,45" href="sehbehinderung.html" alt="Sehbehinderung"/> </map>
Schriftgrafiken
Da mit HTML 4 nur eine sehr begrenzte Anzahl von Schriften zur Verfügung stehen, neigen viele Web-Designer dazu, Texte als Bilder in die Webseite einzubauen, um so das Corporate Design zu wahren. Dies sieht zwar auf den ersten Blick gut aus, hat jedoch zwei entscheidende Nachteile:
- Die Schriftgrafik kann weder von Suchmaschinen, noch von einem Screenreader erfasst werden
- Die Schrift kann für Sehbehinderte in ihrer Farbe und Grösse nicht angepasst werden
Von Schriftgrafiken wird aus der Sicht der Barrierefreiheit daher stark abgeraten.
Logo als Grafik
Die einzige Ausnahme für eine Schriftgrafik ist in der Regel das Logo. Das Logo ist ein wichtiges Element für die Wiedererkennung einer Webseite (oder eines Corporate Designs) und es sollte dabei deshalb kein Kompromiss eingegangen werden. Zudem sind Logos oft bereits eine Kombination aus Grafik und Schrift, die sich schlecht trennen lässt.
In der Regel wird das Logo mit einem Link auf die Startseite versehen.
<a href="/index.html"> <img src="images/logo.png" alt="Barrierefreiheit im Internet" /> </a>
Layoutgrafiken
Wenn eine Grafik keinen Informationsgehalt hat und ausschliesslich als Abstandhalter verwendet wird, so sollte man das alt-Attribut zwar angeben aber leer lassen. Auf diese Weise erkennt ein Screenreader, dass es sich um eine Layoutgrafik handelt und überspringt diese. Ohne alt-Attribut, würde er den Namen der Grafik vorlesen. Dies kann gerade bei Layoutgrafiken, die oft mehrmals auf einer Seite verwendet werden, mühsam werden.
<img src="images/spacer.gif" alt="" />