Image-Maps und Barrierefreiheit

Redundante Links für serverseitige Image-Maps

• Grundüberlegung .
• Beispiel einer serverseitigen Image-Map .

Aufgrund der Tatsache, dass Alternativtexte für die aktiven Bereiche serverseitiger Image-Maps nicht vergeben werden können, stellt diese Technik ein Zugänglichkeitsproblem dar. Serverseitige Image-Maps sind außerdem nicht mit der Tastatur bedienbar. Glücklicherweise werden serverseitige Image-Maps aber kaum noch eingesetzt.

Grundüberlegung

In der Regel sind serverseitige Image-Maps kein geeignetes Mittel für die Realisierung interaktiver Karten. Meist wird zugunsten von Flash-Filmen, JavaScript oder Java-Applets entschieden. Im Grunde müsste SVG (Scalable Vector Graphics) 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: die fehlende Textorientierung und die  Mausabhängigkeit. Von daher ist ein gleichwertiger Zugang beispielsweise über eine Formularabfrage oder einer Linkliste erforderlich. Eine Linkliste würde eine "überschaubare" Anzahl von Links voraussetzen, was letztendlich wieder für eine  clientseitige Image-Map spricht.

Die Gestaltung einer Lösung für textbasierten und geräteunabhängigen Zugang für serverseitige Image-Maps könnte in Form einer Formularabfrage erfolgen. Es müsste jeder aktive Bereich genau durch einen zu übertragenden Wert in den Formularfeldern eindeutig bestimmt sein, um auch mit der Tastatur einen aktiven Zielbereich der Grafik auswählen zu können. Dies kann mit Text oder auf andere Weise realisiert werden.

Es müssen zwei Aspekte bedacht werden:

• eine textbasierte und geräteunabhängige Lösung ist innerhalb der serverseitigen Image-Maps 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

Das folgende Beispiel zeigt im ersten Teil die Schreibweise für einen serverseitigen Image-Map. Durch Click auf das Bild werden die Mauskoordinaten an das Linkziel übergeben. In der verlinkten Datei wird ein serverseitiger Skript verwendet, um die Koordinaten auszuwerten. Anhand dieser Koordinaten wird dann die ausgewählte Farbe ermittelt und ausgegeben. Die Funktionsweise können Sie in der  Demonstrationsdatei überprüfen. Sie werden feststellen, dass die Auswahl einer beliebigen Farbe mit der Tastatur über die Grafik nicht möglich ist.

Um eine Farbe mit der Tastatur auswählen zu können, ist eine textbasierte Alternative erforderlich. Als Lösung wird hier eine Auswahlliste gewählt, weil diese besser mit der Tastatur zu bedienen ist als eine einfache Linkliste. Beispielsweise kann mit dem Drücken eines beliebigen Buchstaben direkt zu dem nächsten Eintrag gesprungen werden, der mit dem gedrückten Buchstaben beginnt.

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.

Da die Liste der Einträge sehr lang ist, werden im Folgenden lediglich einige Beispieleinträge dargestellt.

<form action="#" method="post">
<p><select name="i" size="1">
<option lang="en" value="0">aliceblue (#F0F8FF)</option>
<option lang="en" value="1">antiquewhite (#FAEBD7)</option>
<option lang="en" value="2">aqua (#00FFFF)</option>
<option lang="en" value="3">aquamarine (#7FFFD4)</option>
[...]
<option lang="en" value="139">yellowgreen (#9ACD32)</option>
</select></p>
<p><input type="submit" /></p>
</form>

Obwohl in der  Bedingung 1.2 lediglich von redundanten Links die Rede ist, ist das Anbieten eines textbasierten und mit der Tastatur bedienbaren Formulars als Alternative zu serverseitigen Image-Maps sicher in Sinne des Nutzers.

nach oben

Über das CSS-Design

Lesen Sie,  warum ich mich an die Standards halte und warum das Layout mit  Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der  Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?

Entspricht die Seite den W3C-Normen?

Die  Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie  Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.