Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Image-Maps und Barrierefreiheit veröffentlicht in 2007

Alternativtexte für aktive Bereiche in Image-Maps

Alternativtexte müssen in Image-Maps auf 2 Ebenen vergeben werden:

  1. Alternativtexte für die einzelnen aktiven Bereiche einer Image-Map
    Die Alternativtexte werden über die AREA-Elemente (und unter bestimmten Umständen über die A-Elemente) vergeben. Alternativtexte können nicht für serverseitige Image-Maps vergeben werden!

  2. Alternativtext für die Gesamtdarstellung der Image-Map
    Es 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 Intern: Richtlinie 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.

Alternativtext für die Gesamtdarstellung der Image-Map

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>

Alternativtexte für die einzelnen aktiven Bereiche einer Image-Map

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>

Bei der Auswahl von Alternativtexten müssen Sie folgendes beachten:

title-Attribut für Image-Maps

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

Aller guten Dinge sind drei

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

Eine Besonderheit tritt beim alt-Attribut des AREA-Elements auf, denn dieses wird als Linktext genutzt. 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 Intern: redundante Linkliste erweitert werden sollten.

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 Tastaturnutzer keinen Zugriff darauf 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.

Beispiele für Alternativtexte in clientseitigen Image-Maps

Beispiel 1: Kompass

Es folgt zunächst der Quelltext für eine clientseitige Image-Map. Die Image-Map selbst besitzt ebenso einen Alternativtext wie die aktiven Bereiche. Berücksichtigt ist auch das title-Attribut für das AREA-Element:

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

Es folgt die Realisierung des Quelltextbeispiels. Das Anklicken der Links in diesem Beispiel führt Sie lediglich an den Anfang dieser Seite! Beim Überfahren der verlinkten Regionen mit der Maus wird der Inhalt des title-Attributs des AREA-Elementes sichtbar.

Norden Nordosten Osten Südosten Süden Südwesten Westen Nordwesten Kompass mit verweissensitiven Bereichen für die acht Himmelsrichtungen Nord, Nord-Ost usw.

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

Dieses Beispiel ist noch nicht barrierefrei! Zur Barrierefreiheit benötigen clientseitige Image-Maps noch Intern: Redundante Textlinks.

Beispiel 2: Farbwähler

Das folgende Beispiel demonstriert den problematischen Umgang mit Informationen von hoher Dichte innerhalb von Image-Maps. Zur Umsetzung des Farbwählers finden Sie auf diesen Seiten ebenfalls einen serverseitigen Ansatz mit Hilfe von redundanten Links zur Erstellung der Image-Map.

Die Forderung nach redundanten Links wird in diesem clientseitigen Beispiel nicht umgesetzt, da die Nutzbarkeit mit der Tastatur aufgrund der hohen Datendichte durch die Bereitstellung von Linklisten nicht gelöst wird. Dieses Beispiel ist somit nach Bedingung 1.5 nicht barrierefrei!.

Es folgen ein Quelltextausschnitt und ein Realisierungsbeispiel mit kurzer Erklärung zur clientseitigen Version des Farbwählers.

Quelltextausschnitt

<h2>Beispiel: Farbwähler</h2>
<p>Bitte wählen Sie aus der Farbskala eine Farbe, die Ihrer Lieblingsfarbe am nächsten kommt:</p>
<p><img src="140_farben.gif" usemap="#farbwaehler" alt="Farbfeld mit den 140 Standardfarben" />
<map id="farbwaehler" name="farbwaehler">
  <area href="#" shape="rect" lang="en" coords="0,0,10,10" alt="maroon (#800000)" />
  <area href="#" shape="rect" lang="en" coords="10,0,20,10" alt="darkred (#8B0000)" />
  <area href="#" shape="rect" lang="en" coords="20,0,30,10" alt="firebrick (#B22222)" />
  <!--...-->
</map></p>

Realisierung

Bitte wählen Sie aus der Farbskala eine Farbe, die Ihrer Lieblingsfarbe am nächsten kommt:

Hinweis: Das Betätigen der Links führt Sie lediglich an den Anfang dieser Seite.

Farbfeld mit den 140 Standardfarben maroon (#800000) darkred (#8B0000) firebrick (#B22222) brown (#A52A2A) crimson (#DC143C) red (#FF0000) orangered (#FF4500) indianred (#CD5C5C) darksalmon (#E9967A) lightsalmon (#FFA07A) coral (#FF7F50) tomato (#FF6347) salmon (#FA8072) lightcoral (#F08080) palevioletred (#DB7093) mediumvioletred (#C71585) deeppink (#FF1493) fuchsia (#FF00FF) magenta (#FF00FF) hotpink (#FF69B4) lightpink (#FFB6C1) pink (#FFC0CB) thistle (#D8BFD8) plum (#DDA0DD) violet (#EE82EE) orchid (#DA70D6) mediumorchid (#BA55D3) darkorchid (#9932CC) darkviolet (#9400D3) purple (#800080) darkmagenta (#8B008B) indigo (#4B0082) blueviolet (#8A2BE2) mediumpurple (#9370DB) mediumslateblue (#7B68EE) slateblue (#6A5ACD) darkslateblue (#483D8B) midnightblue (#191970) navy (#000080) darkblue (#00008B) mediumblue (#0000CD) blue (#0000FF) royalblue (#4169E1) cornflowerblue (#6495ED) steelblue (#4682B4) dodgerblue (#1E90FF) deepskyblue (#00BFFF) lightskyblue (#87CEFA) skyblue (#87CEEB) lightsteelblue (#B0C4DE) lightblue (#ADD8E6) powderblue (#B0E0E6) paleturquoise (#AFEEEE) mediumturquoise (#48D1CC) lightseagreen (#20B2AA) darkcyan (#008B8B) teal (#008080) cadetblue (#5F9EA0) darkturquoise (#00CED1) aqua (#00FFFF) cyan (#00FFFF) turquoise (#40E0D0) aquamarine (#7FFFD4) mediumaquamarine (#66CDAA) darkseagreen (#8FBC8F) mediumseagreen (#3CB371) seagreen (#2E8B57) darkgreen (#006400) green (#008000) forestgreen (#228B22) limegreen (#32CD32) springgreen (#00FF7F) mediumspringgreen (#00FA9A) palegreen (#98FB98) lightgreen (#90EE90) lime (#00FF00) chartreuse (#7FFF00) lawngreen (#7CFC00) greenyellow (#ADFF2F) yellowgreen (#9ACD32) darkolivegreen (#556B2F) olivedrab (#6B8E23) olive (#808000) darkkhaki (#BDB76B) darkgoldenrod (#B8860B) goldenrod (#DAA520) gold (#FFD700) yellow (#FFFF00) khaki (#F0E68C) palegoldenrod (#EEE8AA) sandybrown (#F4A460) orange (#FFA500) darkorange (#FF8C00) chocolate (#D2691E) saddlebrown (#8B4513) sienna (#A0522D) peru (#CD853F) burlywood (#DEB887) tan (#D2B48C) wheat (#F5DEB3) navajowhite (#FFDEAD) moccasin (#FFE4B5) blanchedalmond (#FFEBCD) rosybrown (#BC8F8F) mistyrose (#FFE4E1) lavenderblush (#FFF0F5) lavender (#E6E6FA) ghostwhite (#F8F8FF) azure (#F0FFFF) lightcyan (#E0FFFF) aliceblue (#F0F8FF) mintcream (#F5FFFA) honeydew (#F0FFF0) lightgoldenrodyellow (#FAFAD2) lemonchiffon (#FFFACD) beige (#F5F5DC) lightyellow (#FFFFE0) ivory (#FFFFF0) floralwhite (#FFFAF0) linen (#FAF0E6) oldlace (#FDF5E6) cornsilk (#FFF8DC) antiquewhite (#FAEBD7) bisque (#FFE4C4) peachpuff (#FFDAB9) papayawhip (#FFEFD5) seashell (#FFF5EE) snow (#FFFAFA) white (#FFFFFF) whitesmoke (#F5F5F5) gainsboro (#DCDCDC) lightgrey (#D3D3D3) silver (#C0C0C0) darkgray (#A9A9A9) gray (#808080) dimgray (#696969) lightslategray (#778899) slategray (#708090) darkslategray (#2F4F4F) black (#000000)

Auch wenn das Beispiel jetzt Alternativtexte besitzt und mit der Tastatur bedienbar ist, so ist die Nutzung immer noch problematisch: mit der Tastatur muss die Tabulatortaste recht häufig betätigt werden, um die zuletzt aufgeführten Farben zu erreichen.

Eine denkbare Alternativlösung ist die Implementierung in Form von Formularen. Die Farbfelder könnten dabei durch Intern: grafische Schaltflächen realisiert werden.