server-side-image-map-absent

Serverseitige Image-Maps müssen eine per Tastatur bedienbare Alternative haben

automaticWCAG 2.1.1 (A)Konfidenz: highSchweregrad: seriousoperable

Fragt für jedes <img ismap> in einem Link nach, ob die Seite dieselben Ziele als per Tastatur erreichbare Links anbietet, da eine serverseitige Image-Map keine eigenen per Tastatur bedienbaren Bereiche hat.

Anwendbarkeit. Gilt für jeden Scan-Bereich. Ein <img ismap> in einem <a href> ist eine serverseitige Image-Map: Der Browser sendet die Klickkoordinaten an die URL des Links, was keine per Tastatur bedienbare Entsprechung hat und assistiven Technologien keine einzelnen Bereiche bereitstellt.

Erwartung. Jede serverseitige Image-Map wird als cantTell gemeldet: 2.1.1 ist erfüllt, wenn dieselben Ziele auch als per Tastatur erreichbare Links angeboten werden, was die Regel nicht prüfen kann. Clientseitige Image-Maps (<map>/<area>) werden nicht gemeldet. Ein Bereich ohne <img ismap> gilt als bestanden. Einer, dessen einzige <img ismap>-Elemente außerhalb eines Links liegen, ist notApplicable: ismap bewirkt dort nichts, also gibt es keine serverseitige Image-Map (das falsch platzierte Attribut ist ungültiges HTML, eine Sache für den Validator).

Beispiele

pass

<img src="image.png" usemap="#nav" alt="Site map">
<map name="nav">
  <area href="/x" shape="rect" coords="0,0,10,10" alt="Go">
</map>

Eine clientseitige Image-Map hat kein ismap-Attribut, was die Regel unmittelbar erfüllt. (Ein <img ismap> außerhalb eines Links bewirkt nichts und macht die Regel nicht anwendbar.)

can't tell

<a href="/map-handler">
  <img src="image.png" ismap alt="Site map">
</a>

ismap setzt voraus, dass der Browser Klickkoordinaten an den Server sendet, daher sind die Bereiche der Map per Tastatur nicht erreichbar; ob die Seite dieselben Ziele als Links anbietet, prüft eine Person. Diese Regel ergibt nie fail.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

`SERVER_SIDE_IMAGE_MAP`

Suchen Sie die im Bericht genannte Imagemap und klicken Sie auf ihre Bereiche, um aufzulisten, wohin jeder führt.
Legen Sie die Maus beiseite, gehen Sie die Seite mit Tab bis zum Bildlink durch, drücken Sie dann Eingabetaste und notieren Sie, was passiert.
Suchen Sie an anderer Stelle der Seite nach gewöhnlichen Textlinks zu jedem der aufgelisteten Ziele und prüfen Sie, ob Sie sie mit Tab und Eingabetaste erreichen und ihnen folgen können.

Bestanden. Jedes Ziel der Imagemap wird auch als Link angeboten, der per Tastatur funktioniert.

Nicht bestanden. Ein Ziel lässt sich nur durch Klicken auf eine Stelle im Bild erreichen; das verstößt gegen WCAG 2.1.1.

Quellcode ansehen