Image-Maps und Barrierefreiheit 
veröffentlicht in 2007
Alternativtexte für aktive Bereiche in Image-Maps
Alternativtexte müssen in Image-Maps auf 2 Ebenen vergeben werden:
Alternativtexte für die einzelnen aktiven Bereiche einer Image-Map
Die Alternativtexte werden über dieAREA-Elemente (und unter bestimmten Umständen über dieA-Elemente) vergeben. Alternativtexte können nicht für serverseitige Image-Maps vergeben werden!Alternativtext für die Gesamtdarstellung der Image-Map
Es ist ein auf das gesamte Bild zutreffender Alternativtext zu vergeben.
Sowohl die Anforderungen an Alternativtexte für die Grafik selbst als auch die Bildbeschreibungen für die aktiven Bereiche einer clientseitigen Image-Map werden in der 
Richtlinie 1.1 formuliert.
alt- und title-Attribute sind erforderlich
Wenn clientseitige Image-Maps für einen Webauftritt konzipiert werden, muss die Bestimmung der Alternativtexte sowohl im Hinblick auf das Bild, als auch der einzelnen Bildbereiche (Links) bedacht werden. Screenreader haben somit die Möglichkeit, einen Text anstatt des Bildes auszugeben.
Alternativtext für die Gesamtdarstellung der Image-Map
Der Alternativtext für die Grafik wird mit dem alt-Attribut definiert. Er sollte beschreibenden Charakter besitzen:
<p><img src="farbauswahl.gif" alt="140 Standardfarben für die Webgestaltung" ... /></p>
Alternativtexte für die einzelnen aktiven Bereiche einer Image-Map
Die Alternativtexte für die aktiven Bereiche einer clientseitigen Image-Map werden im AREA-Element definiert. Sie sollten auf die Funktion des Links ausgerichtet sein:
<map id="farbauswahl" name="farbauswahl">
<area ... alt="Braun" />
<!--...-->
</map>
Bei der Auswahl von Alternativtexten müssen Sie folgendes beachten:
- Die Alternativtexte werden als Linktexte behandelt und sollten deshalb knapp, aber eindeutig formuliert sein.
- Die beschreibenden Texte dürfen sich nicht wiederholen.
- Aktionen, die durch Betätigen eines Links ausgeführt werden, müssen klar benannt sein.
title-Attribut für Image-Maps
Mit dem title-Attribut kann eine zusätzliche Link-Beschreibung eingefügt werden. Von ihr profitieren alle Mausnutzer, jedoch sollten wichtige Informationen keinesfalls dort enthalten sein, wenn sie nicht an anderer Stelle vermittelt werden, denn Tastaturnutzer kommen normalerweise nicht an diese Informationen heran.
title-Attribut anstelle des alt-Attributs aus. Also muss bei der Wahl des title-Attributs ebenfalls auf die Eindeutigkeit geachtet werden. Auch sollten die Kriterien für den Inhalt des title-Attributs die gleichen sein, wie für den Alternativtext:
<map id="farbauswahl" name="farbauswahl">
<area ... alt="Braun" title="Braun" />
<!--...-->
</map>
Aller guten Dinge sind drei
Die Vergabe von Alternativtexten für eine Image-Map ist technisch unproblematisch. Allerdings spielt der Zusammenhang bei der Auswahl der Texte eine Rolle. Zu beachten ist auch, dass sowohl das Bild selbst als auch die aktiven Bereiche clientseitiger Image-Maps unterschiedlichen Kriterien unterliegen:
titlebeschreibt das Ziel, auf welches verwiesen wird,altübernimmt die Beschreibung des Bildelementes.
Eine Besonderheit tritt beim alt-Attribut des AREA-Elements auf, denn dieses wird als Linktext genutzt. Die Reihenfolge der AREA-Elemente bestimmt zunächst auch die Tabulatorreihenfolge. Es sollte im Sinne von Bedingung 9.4 auf die Schlüssigkeit der Tabulatorreihenfolge geachtet werden. Die Verwendung von tabindex kann sinnvoll sein, ist aber nicht zwingend erforderlich.
Bitte beachten Sie, dass Image-Maps stets durch eine redundante Linkliste erweitert werden sollten.
alt (IMG) |
Was ist dargestellt? Die Grafik sollte mit wenigen Worten beschrieben werden. |
|---|---|
title (AREA) |
Wohin wird verlinkt? Hier dürfen keine wichtigen Informationen stehen, da Tastaturnutzer keinen Zugriff darauf haben. Die Texte sollten redundant sein. |
alt (AREA) |
Wohin wird verlinkt? Dieser Text kann, muss aber nicht dem title-Attribut entsprechen. Der Text sollte die Funktion des Links knapp wiedergeben. Sie wird ausgegeben in älteren Screenreadern. |
Beispiele für Alternativtexte in clientseitigen Image-Maps
Beispiel 1: Kompass
Es folgt zunächst der Quelltext für eine clientseitige Image-Map. Die Image-Map selbst besitzt ebenso einen Alternativtext wie die aktiven Bereiche. Berücksichtigt ist auch das title-Attribut für das AREA-Element:
<h2>Beispiel: Ein klassischer Kompass</h2>
<p><map id="kompass" name="kompass">
<area href="#" shape="rect" coords="140,0,200,140" title="Der hohe Norden ist nur einen Tastendruck entfernt" alt="Norden" />
<area href="#" shape="rect" coords="200,0,350,140" title="Zwischen Norden und Osten" alt="Nordosten" />
<area href="#" shape="rect" coords="200,140,350,200" title="Mit Vollgas in den Osten" alt="Osten" />
<area href="#" shape="rect" coords="200,200,350,350" title="Südöstlich köstlich" alt="Südosten" />
<area href="#" shape="rect" coords="140,200,200,350" title="Ab in den Süden" alt="Süden" />
<area href="#" shape="rect" coords="0,200,140,350" title="Nicht mehr im Süden und noch nicht ganz Westen" alt="Südwesten" />
<area href="#" shape="rect" coords="0,140,140,200" title="Hier ist kein wilder Westen zu erwarten" alt="Westen" />
<area href="#" shape="rect" coords="0,0,140,140" title="Halb im Norden, halb im Westen" alt="Nordwesten" />
</map>
<img src="kompass.gif" alt="Kompass mit verweissensitiven Bereichen für die acht Himmelsrichtungen Nord, Nord-Ost usw." usemap="#kompass" /></p>
Es folgt die Realisierung des Quelltextbeispiels. Das Anklicken der Links in diesem Beispiel führt Sie lediglich an den Anfang dieser Seite! Beim Überfahren der verlinkten Regionen mit der Maus wird der Inhalt des title-Attributs des AREA-Elementes sichtbar.
Dieses Beispiel zeigt, dass title- und alt-Attribute des AREA-Elements sich inhaltlich nicht großartig unterscheiden.
Dieses Beispiel ist noch nicht barrierefrei! Zur Barrierefreiheit benötigen clientseitige Image-Maps noch Redundante Textlinks.
Beispiel 2: Farbwähler
Das folgende Beispiel demonstriert den problematischen Umgang mit Informationen von hoher Dichte innerhalb von Image-Maps. Zur Umsetzung des Farbwählers finden Sie auf diesen Seiten ebenfalls einen serverseitigen Ansatz mit Hilfe von redundanten Links zur Erstellung der Image-Map.
Die Forderung nach redundanten Links wird in diesem clientseitigen Beispiel nicht umgesetzt, da die Nutzbarkeit mit der Tastatur aufgrund der hohen Datendichte durch die Bereitstellung von Linklisten nicht gelöst wird. Dieses Beispiel ist somit nach Bedingung 1.5 nicht barrierefrei!.
Es folgen ein Quelltextausschnitt und ein Realisierungsbeispiel mit kurzer Erklärung zur clientseitigen Version des Farbwählers.
Quelltextausschnitt
<h2>Beispiel: Farbwähler</h2>
<p>Bitte wählen Sie aus der Farbskala eine Farbe, die Ihrer Lieblingsfarbe am nächsten kommt:</p>
<p><img src="140_farben.gif" usemap="#farbwaehler" alt="Farbfeld mit den 140 Standardfarben" />
<map id="farbwaehler" name="farbwaehler">
<area href="#" shape="rect" lang="en" coords="0,0,10,10" alt="maroon (#800000)" />
<area href="#" shape="rect" lang="en" coords="10,0,20,10" alt="darkred (#8B0000)" />
<area href="#" shape="rect" lang="en" coords="20,0,30,10" alt="firebrick (#B22222)" />
<!--...-->
</map></p>
Realisierung
Bitte wählen Sie aus der Farbskala eine Farbe, die Ihrer Lieblingsfarbe am nächsten kommt:
Hinweis: Das Betätigen der Links führt Sie lediglich an den Anfang dieser Seite.
Auch wenn das Beispiel jetzt Alternativtexte besitzt und mit der Tastatur bedienbar ist, so ist die Nutzung immer noch problematisch: mit der Tastatur muss die Tabulatortaste recht häufig betätigt werden, um die zuletzt aufgeführten Farben zu erreichen.
Eine denkbare Alternativlösung ist die Implementierung in Form von Formularen. Die Farbfelder könnten dabei durch grafische Schaltflächen realisiert werden.