Image-Maps und Barrierefreiheit veröffentlicht in 2007

Dieser Artikel wurde im April 2007 verfasst und redaktionell überarbeitet.

Image-Maps sind Grafiken, in denen einzelne Bereiche als Links definiert werden, und somit für den Besucher auswählbar sind. Man bezeichnet sie deshalb auch als "verweissensitive" Grafiken. Häufig finden sich Image-Maps in Form von Landkarten oder Menüs wieder.

Es gibt zwei Arten von Image-Maps: clientseitige und serverseitige Image-Maps.

Clientseitige Image-Maps enthalten Links, die mit HTML bestimmt werden. Sie bestehen aus der eigentlichen Grafik, welche mit IMG-Elementen in eine HTML-Seite eingebunden sind.

Die Definition der aktiven Bereiche erfolgt mithilfe des Map-Elements. Damit für den Browser offensichtlich ist, auf welche Grafik sich das MAP-Element bezieht, findet eine Verknüpfung statt: Das MAP-Element erhält eine Bezeichnung, z.B. name="grafik1", das Bild bekommt den Zusatz USEMAP="#grafik1". Damit werden die Angaben innerhalb des MAP-Elements zur Auszeichnung einzelner Bereiche in der Grafik zu Links herangezogen. Die Links können in ihrer Form rechteckig, rund oder als Polygon frei gestaltet werden.
Serverseitige Image-Maps leiten die Koordinaten eines Mausklicks an ein Script weiter, das diese dann auswertet. Hier ist neben dem Skript die Verwendung eines Mauszeigers erforderlich.
Die Vergabe von Alternativtexten ist in einer serverseitigen Image-Map nicht möglich. Es entstehen also schwerwiegende Probleme der Zugänglichkeit und Nutzbarkeit.

Aus diesen beiden Gründen ist vom Einsatz serverseitiger Image-Maps abzuraten.

Übersicht: Image-Maps und Barrierefreiheit

Der Beitrag "Image-Maps und Barrierefreiheit" besteht aus folgenden einzelnen Dokumenten:

Clientseitige statt serverseitige Image-Maps: Serverseitige Image-Maps bedeuten immer eine Barriere, clientseitige Image-Maps lassen sich barrierefrei umsetzen.
Grafische Schaltflächen in Formularen: Grafische Schaltflächen müssen per Tastatur bedienbar sein und dürfen nur für jeweils eine einzige Aktion eingesetzt werden.
Alternativtext für aktive Bereiche in Image-Maps: Auf insgesamt 3 Ebenen sind Alternativtexte erforderlich: alt-Attribut sind für die Grafik selbst und für die aktiven Bereiche notwendig. Darüber hinaus sollte ein title-Attribut für die aktiven Bereiche berücksichtigt werden.
Redundante Links für Image-Maps: Clientseitige Image-Maps sind in der Regel zugänglich und sollten gegebenenfalls durch redundante Links ergänzt werden.
CSS-Positionierung von Linklisten an Stelle von Image-Maps: CSS - eine mögliche aber problembehaftete Alternative zu Image-Maps.