Der direkte Zugriff
Alte Screenreader konnten clientseitige Image-Maps nicht erfassen. Das bedeutete, die einzelnen Links innerhalb Client-seitiger Image-Map wurden nicht ausgelesen. Die heutigen Hilfsmittel blinder Nutzer haben damit keine Schwierigkeiten mehr und behandeln die aktiven Bereiche genauso wie Links.
Zu bedenken ist, dass Alternativtexte der einzelnen area-Attribute nicht angezeigt werden, wenn der Besucher die Darstellung von Bildern ausgeschaltet hat. Für Nutzer mit ausgeschalteten Grafiken ist es also erforderlich, einen alternativen Zugang zur Image-Map anzubieten.
Bei ausgeschalteten Grafiken können die verlinkten Bereiche der Image-Map nicht mehr erkannt werden.
Es gibt verschiedene Möglichkeiten, redundante Alternativen zu den aktiven Bereichen in einer clientseitigen Image-Map zu berücksichtigen:
UL definiert wird. Hierbei handelt es sich um eine sehr einfache, jedoch effiziente Lösung.![[intern]](../../lib/img/intern.gif){kind=small}
das Beispiel zu serverseitigen Image-Maps)Auch ist der Einsatz von CSS zugunsten eines Verzichts auf Image-Maps eine mögliche Alternative, in dem einzelne Listenpunkte auf einer Grafik positioniert werden. Allerdings gibt es bei dieser Technik meist Schwierigkeiten, wenn die Textgröße im Browser vergrößert oder verkleinert wird. Weiter müssen in aller Regel die Linktexte relativ kurz sein.
Um die 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.
<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 Norden, Nordosten, Osten usw." usemap="#kompass" /> </p>
<ul>
<li><a href="#" title="Der hohe Norden ist nur einen Tastendruck entfernt">Norden</a></li>
<li><a href="#" title="Zwischen Norden und Osten">Nordosten</a></li>
<li><a href="#" title="Mit Vollgas in den Osten">Osten</a></li>
<li><a href="#" title="Südöstlich köstlich">Südosten</a></li>
<li><a href="#" title="Ab in den Süden">Süden</a></li>
<li><a href="#" title="Nicht mehr im Süden und noch nicht ganz im Westen">Südwesten</a></li>
<li><a href="#" title="Hier ist kein wilder Westen zu erwarten">Westen</a></li>
<li><a href="#" title="Halb im Norden, halb im Westen">Nordwesten</a></li>
</ul>
Die Liste sollte entsprechend mit CSS gestaltet und positioniert werden. Zu berücksichtigen wäre noch Bedingung 10.5
Eine weitere, aber nicht immer so einfach umsetzbare Lösung besteht darin, die relevanten Informationen als übliche Links zu gestalten und über der Grafik zu positionieren. CSS bietet hierbei die Möglichkeit, mittels Positionierung den Text an der gewünschten Stelle zu platzieren. Der Vorteil dieser Technik ist, dass es nicht zu Redundanzen von Links kommt.
Das Beispiel finden Sie in der Demonstrationsdatei.
In diesem Beispiel werden die verlinkten Namen der Himmelsrichtungen mit Hilfe von Listenpunkten und CSS auf der Grafik positioniert. Durch die Angabe relativer Größen für die Grafik wird auch das Skalieren der Grafik ermöglicht. Diese Technik kann durch die Schrifteinstellungen des Benutzers zu erheblichen Problemen führen. Auch ist nicht sichergestellt, ob die Links gelesen werden können, etwa wenn der Nutzer andere Farben eingestellt hat, als der Gestalter es erwartet.
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.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
