Barrierefreie Image Maps

Image Maps habe ich nicht mehr verwendet, seit ich mich mit CSS gesteuerten Webseiten beschäftige – und das sind inzwischen ein paar Jährchen. Aber z.Z. arbeite ich an einem Auftrag, der so etwas erfordert und barrierefrei muss es auch sein. Also habe ich mich mal mit “Night of the Image Map” von Stuart Robertson beschäftigt. Die Idee dahinter ist, unsichtbare Links zu erzeugen, sie per position: absolute über einem Basisbild zu verteilen und ihnen für die Buttonfunktion im :hover-Status jeweils ein eigenes Hintergrundbild mitzugeben. Mit CSS haben wir eine perfekte Image Map, ohne CSS benutzbare Links.

Funktioniert eigentlich ganz gut, bis auf die 5er Internet Explorer. Hier bleibt das Hover-Bild leider stehen, wenn es einmal mit der Maus berührt wurde. Stuart Robertson zeigt dazu einen Workaround (:hover bekommt ein border:none). Bei mir hat es allerdings nicht geholfen.

Was mir auffiel: Die meisten meiner Buttons funktionieren auch im IE5 problemlos. Sie sind aber im Gegensatz zum Tutorial von Robertson nicht im Basisbild integriert. Ich habe wie bei einem Mouseover jeweils eine On- und Off-Ansicht, also auch im “a:link” ein Hintergrundbild definiert. Nur ein Button tanzt aus der Reihe, er hat nur den On-Status, also genauso wie in o.g. Vorbild. Das brachte mich auf eine alternative Lösung: Ich habe jenem Button ebenfalls ein Off-Bild spendiert – allerdings nur ein 1-Pixel-Transparent-Gif. Dieser eine Pixel genügt, um den Effekt im IE5 auszuschalten.

Heureka.