Image-Maps und Barrierefreiheit

Clientseitige statt serverseitige Image-Maps

Vorteile clientseitiger gegenüber serverseitiger Image-Maps .
Beispiel einer clientseitigen Image-Map .
Grafische Schaltflächen in Formularen .

Der direkte Zugriff

Vorteile clientseitiger gegenüber serverseitiger Image-Maps

Weil serverseitige Image-Maps nicht barrierefrei umgesetzt werden können, muss diese Technik heute als veraltet angesehen werden. Zudem werden die Anwendungen, die "früher" als serverseitige Image-Maps erstellt wurden, heute mit Flash und JavaScript erzeugt.

Für serverseitige Image-Maps ist eine Kommunikation zwischen Browser und Server erforderlich. Abgesehen davon, dass die Bedienung in einer lokalen Umgebung nicht funktioniert (z.B. beim Herunterladen der Seite), weisen serverseitige Image-Maps aus Sicht der Barrierefreiheit auch erhebliche Nachteile auf:

Serverseitige Image-Maps sind nur mit dem Mauszeiger und nicht mit der Tastatur bedienbar.
Es gibt keine Möglichkeit, den einzelnen Koordinaten (Links) der Grafik einer serverseitigen Image-Map voneinander unterscheidbare Alternativtexte zuzuweisen.

Diese beiden Probleme tauchen bei clientseitigen Image-Maps gar nicht erst auf. Von daher wird in der Bedingung 9.1 der Verzicht auf serverseitige zugunsten clientseitiger Image-Maps gefordert.

Bei der Berücksichtigung von Image-Maps in einem Webauftritt ist zu überlegen, ob sie clientseitig umgesetzt werden können. Mit dem shape-Attribut können Links innerhalb einer Image-Map rechteckig, rund oder als Polygon gestaltet werden.

Beispiel einer clientseitigen Image-Map

Das folgende Beispiel ist ein Auszug einer clientseitigen Version der Serverseitigen Image-Map aus dem Beispiel Redundante Links für serverseitige Image-Maps. Das vollständige Beispiel Finden Sie in der [intern] Demonstrationsdatei. Die Forderung nach redundanten Links wird in diesem Beispiel nicht umgesetzt und das Beispiel ist somit auf dieser Seite nicht barrierefrei nach Bedingung 1.5.

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

Auch wenn das Beispiel jetzt Alternativtexte besitzt und mit der Tastatur bedienbar ist, so ist die Nutzbarkeit nicht optimal. Mit der Tastatur muss die Tabulatorentaste recht häufig betätigt werden, um die zuletzt aufgeführten Farben zu erreichen. Auch die Bereitstellung redundanter Textlinks bietet hier keine besondere Abhilfe, weil die Nutzbarkeit mit der Tastatur mit der Bereitstellung von Linklisten nicht gelöst wird. Vielmehr müssen alternative Navigationsmöglichkeiten entwickelt werden, die die Navigation mit der Tastatur optimieren. Eine denkbare Lösung ist mit Formularen.

Grafische Schaltflächen in Formularen

Wenn in Formularen die Schaltflächen als Grafik gestaltet sind (type="image"), so entspricht die Eingabebehandlung der Schaltflächedie eines serverseitigen Image-Maps. Dies stellt kein Problem dar, solange es nur eine Aktion auszuführen gibt. Im Zusammenhang mit der Anforderung, clientseitige statt serverseitige Image-Maps einzusetzen, bedeutet dies, dass keinesfalls mehrere Aktionen durch eine einzelne Schaltfläche ausgelöst werden dürfen.

Im folgenden Beispiel ist die Bedienbarkeit mit der Tastatur möglich und der Alternativtext ist richtig gesetzt.

<form action="#" method="post"> <p><input name="waehlen" type="image" src="waehlen.gif" alt="Wählen" /></p> </form>

Bildschirmfoto: Schaltfläche "Wählen" Der Internet Explorer zeigt den Alternativtext bei Berührung des Mauszeigers mit der Grafik

Sobald in der Grafik aber mehrere Optionen zur Verfügung gestellt werden, kann weder ein Alternativtext für die einzelnen Bereiche vergeben werden noch die Bedienung mit der Tastatur erfolgen. Das folgende Beispiel verdeutlicht die Problematik:

<form action="#" method="post"> <p><input type="image" src="auswahl.gif" alt="Auswahl 1 und Auswahl 2" /></p> </form>

Bildschirmfoto: Schaltfläche mit "Auswahl 1" und "Auswahl 2" Der Tastaturfokus umfasst beide Auswahlmöglichkeiten.

Mit der Tastatur ist eine beliebige Auswahl der Aktionen nicht möglich, wie Sie in der [intern] Demonstrationsdatei feststellen können. Vielmehr müssen die einzelnen Aktionen, die mit dem Formular ausgelöst werden können, entsprechend mittels einzelner Schaltflächen geboten werden:

<form action="#" method="post"> <p> <input name="auswahl1" type="image" src="auswahl1.gif" alt="Auswahl 1" /> <input name="auswahl2" type="image" src="auswahl2.gif" alt="Auswahl 2" /> </p> </form>

Bildschirmfoto: Schaltfläche "Auswahl 1" und Schaltfläche "Auswahl 2" Mit zwei einzelnen Schaltflächen ist die gezielte Auswahl auch mit der Tastatur möglich