Image-Maps und Barrierefreiheit

Alternativtext für aktive Bereiche in Image-Maps

alt- und title-Attribute sind erforderlich .
Alle guten Dinge sind drei .

Der direkte Zugriff

Für die einzelnen aktiven Bereiche einer Image-Map müssen Alternativtexte vergeben werden. Dies erfolgt über die AREA-Elemente (und unter bestimmten Umständen über die A-Elemente). Alternativtexte können somit nur für die aktiven Bereiche clientseitiger Image-Maps - vergeben werden und nicht für serverseitige Image-Maps. Zusätzlich 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 Bedingung 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.

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>

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>

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.

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.

Moderne Hilfsmittel blinder Nutzer wie der Screenreader JAWS oder die Brückensoftware Webformator geben übrigens bei Image-Maps das 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>

Alle guten Dinge sind drei

Die Vergabe von Alternativtexten für eine Image-Map ist technisch unproblematisch. Allerdings spielt der Zusammenhang eine Rolle bei der Auswahl der Texte. Zu beachten ist auch, dass sowohl das Bild selbst als auch die aktiven Bereiche clientseitiger Image-Maps unterschiedlichen Kriterien unterliegen.

title beschreibt das Ziel, auf welches verwiesen wird, wohingegen alt die Beschreibung des Bildelementes übernimmt. Eine Besonderheit tritt beim alt-Attribut des AREA-Elements auf, denn dieses wird als Linktext genutzt:

Alternativtexte für Image-Maps
`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 ansonsten Tastaturnutzer keinen Zugriff 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.

Entsprechend könnte eine Image-Map folgende Alternativtexte besitzen:

<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>

Dieses [intern] Beispiel zeigt, dass title- und alt-Attribute des AREA-Elements sich inhaltlich nicht großartig unterscheiden.

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

vorherige Seite Übersicht nächste Seite