Image-Maps und Barrierefreiheit
veröffentlicht in 2007
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 dasMAP
-Element bezieht, findet eine Verknüpfung statt: DasMAP
-Element erhält eine Bezeichnung, z.B.name="grafik1"
, das Bild bekommt den ZusatzUSEMAP="#grafik1"
. Damit werden die Angaben innerhalb desMAP
-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.
Der Beitrag "Image-Maps und Barrierefreiheit" besteht aus folgenden einzelnen Webseiten:
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.
Alternativtexte 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 eintitle
-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.
Der folgende Begriff auf dieser Seite wird im Glossar definiert:Bezeichnung,