11. Image Map

Eine Image-Map (Imagemap) ist ein Bild, das mehrere klickbare Bereiche enthält. Statt dass das ganze Bild ein einziger Link ist, werden Teilflächen (z. B. Rechtecke, Kreise oder Polygone) definiert, die jeweils eigene Links/Funktionen haben.

Typische Beispiele

  • Lageplan/Grundriss: Klick auf Gebäude A/B führt zu unterschiedlichen Seiten
  • Grafik mit Bereichen: Klick auf Organsysteme, Länder, Bauteile
  • Navigationsgrafik: verschiedene Menüpunkte liegen als Bereiche im Bild

Technische Varianten

  • Clientseitige Image-Map (üblich im Web):
    Umsetzung mit <img usemap="…">, <map> und <area> – hier können Alternativtexte für Bild und Bereiche vergeben werden.
  • Serverseitige Image-Map (veraltet/problematisch):
    Klickposition wird an den Server geschickt; einzelne Bereiche sind nicht sauber als Links auszeichnungsfähig → schlecht für Barrierefreiheit.
  • als SVG eingebettet (inline im HTML) oder eingebunden als SVG-Datei
  • H5P-Elemente, die wie Image-Maps wirken (z. B. Hotspots)

Warum Image-Maps barriere-kritisch sein können

  • Viele kleine Klickflächen sind mit Tastatur, Zoom oder mobil schwer bedienbar.
  • Ohne gute Texte (Alt-Texte/Linktexte) sind die Ziele für Screenreader-Nutzende unklar.
  • Deshalb: Wenn Image-Maps genutzt werden, immer mit Alt-Texten auf zwei Ebenen und redundanter Linkliste arbeiten.

Merkliste

  • img alt = Was ist dargestellt? (Gesamtbild)
  • area alt = Wohin führt der Link / was passiert? (wie Linktext)
  • area title = optionaler Zusatz, nicht einzige Informationsquelle
  • Tab-Reihenfolge beachten + redundante Linkliste bereitstellen

nach – – [barrierefreies-webdesign.de] | Jan Hellbusch (2001-2026)