Es fehlt eine Überschrift!

Es gibt verschiedene Möglichkeiten, redundante Alternativen für Links zu den aktiven Bereichen in einer Image-Map zu berücksichtigen:

• Die Bereitstellung einer Linkliste ergänzend zur Image-Map, die regulär mit UL definiert wird. Hierbei handelt es sich um eine sehr einfache, jedoch effiziente Lösung.
• Die Bereitstellung einer zusätzlichen Auswahlliste (SELECT), die insbesondere dann nützlich ist, wenn es sich um viele Links handelt.

Wir demonstrieren Ihnen diese Techniken anhand folgender Beispiele für clienseitige und serverseitige Image-Maps:

Clientseitige Image-Maps

Um Bedingung 1.5 zu erfüllen, genügt in der Regel die Ergänzung einer Image-Map mit einer Linkliste. Idealerweise sollte die Linkliste im Quelltext unmittelbar vor oder nach der Grafik vorkommen, wie Sie dem nachfolgenden Quelltextbeispiel entnehmen können:

Die Liste sollte entsprechend mit CSS gestaltet und positioniert werden. Zu berücksichtigen wäre noch Bedingung 10.5.

Serverseitige Image-Maps

Grundüberlegung

In der Regel sind serverseitige Image-Maps kein geeignetes Mittel für die Realisierung interaktiver Karten. Meist wird zugunsten von Flash-Filmen, Java-Applets oder Flash-Filmen entschieden. Im Grunde müsste Scalable Vector Graphics (SVG) als textbasiertes Format in die Überlegungen mit einbezogen werden.

Sollte die Wahl dennoch auf serverseitige Image-Maps fallen, müssen folgende, entscheidende Nachteile bedacht werden:

• Fehlende Textorientierung serverseitiger Image-Maps
• Mausabhängigkeit serverseitiger Image-Maps

Erforderlich ist ein gleichwertiger Zugang, beispielsweise über eine Formularabfrage oder eine Linkliste:

• Bei einer Formularabfrage muss jeder aktive Bereich genau durch einen zu übertragenden Wert in den Formularfeldern eindeutig bestimmt sein. So kann auch mit der Tastatur ein aktiver Zielbereich der Grafik ausgewählt werden. Die Formularabfrage kann durch reinen Text oder grafische Schaltflächen realisiert werden.
• Eine Linkliste setzt eine nutzerfreundliche Anzahl von Links voraus, was letztendlich wieder für eine clientseitige Image-Map spricht.

Beachten Sie folgende 2 Aspekte, wenn Sie eine serverseitige Image-Map umsetzen müssen:

• Eine textbasierte und geräteunabhängige Lösung ist innerhalb einer rein serverseitigen Image-Map nicht möglich. Das bedeutet, dass beispielsweise die Formularabfrage einen unmittelbaren Bezug zur Grafik selbst haben muss. Die Auswahlkriterien müssen mit dem Inhalt der Grafik assoziiert werden bzw. die Einträge müssen "sprechend" sein. Oder anders gesagt: die alternative Auswahl muss ohne Wahrnehmung des Bildes zum gewünschten Ergebnis führen.
• Bei einer Formularabfrage muss die Bedienbarkeit auf Tastaturnutzung optimiert werden.

Beispiel einer serverseitigen Image-Map

Es folgt zunächst der HTML-Quellcode zur Einbindung einer serverseitigen Image-Map:

Erklärung: Durch einen Mausklick auf das Bild werden die Mauskoordinaten an das Linkziel übergeben. In der verlinkten Datei wird ein serverseitiges Skript verwendet, um die Koordinaten auszuwerten. Anhand dieser Koordinaten wird dann die ausgewählte Farbe ermittelt und ausgegeben.

Es folgt die Realisierung des Beispiels. Testen Sie die Funktionsweise – Sie werden feststellen, dass die Auswahl einer beliebigen Farbe innerhalb der Grafik mit der Tastatur nicht möglich ist:

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

Um eine Farbe mit der Tastatur auswählen zu können, ist eine textbasierte Alternative erforderlich. Als Lösung wird nachfolgend die Umsetzung mittels Auswahlliste vorgestellt.

Der Vorteil von Auswahllisten gegenüber einfachen Linklisten liegt in einer besseren Tastaturbedienbarkeit: mit dem Drücken eines beliebigen Buchstaben kann direkt zu dem nächsten Eintrag gesprungen werden, welcher mit dem gedrückten Buchstaben beginnt.

Es folgen zunächst eine Beschreibung zur Erstellung der Auswahlliste und ein Ausschnitt des HTML-Quellcodes:

Die Farben im SELECT-Element sind mit ihren englischen Bezeichnungen benannt. Die hexadezimalen Farbcodes sind ergänzend in Klammern angegeben. Für die Aussprache in einer synthetischen Sprachausgabe wird wegen der Farbbezeichnungen die Kennzeichnung der Elemente als englischsprachig gewählt. Dies führt dazu, dass die hexadezimalen Zahlen ebenfalls in Englisch ausgesprochen werden:

Bedingung 1.2 fordert lediglich den Einsatz von redundanten Links. Jedoch ist das Anbieten eines textbasierten und mit der Tastatur bedienbaren Formulars, als Alternative zu serverseitigen Image-Maps, sicher im Sinne des Nutzers.

Es folgt die Realisierung des Beispiels: die fehlende Zugänglichkeit der serverseitigen Image-Map wird durch die Ergänzung eines Formulars kompensiert. Das Formular kann mit der Tastatur bedient werden und bietet die Links in Textform.

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