server-side-image-map-absent

サーバーサイドイメージマップには、キーボードで操作できる代替手段が必要です

automaticWCAG 2.1.1 (A)確度:high重大度:seriousoperable

リンク内の各<img ismap>について、同じリンク先をキーボードで到達できるリンクとしてページが提供しているかを確認します。サーバーサイドイメージマップには、キーボードで操作できる独自の領域がないためです。

適用範囲:あらゆるスキャン範囲に適用されます。<a href>内の<img ismap>はサーバーサイドイメージマップです。ブラウザーはクリックの座標をリンクのURLに送信しますが、これにはキーボードで操作できる同等の手段がなく、個々の領域も支援技術に公開されません。

期待される結果:各サーバーサイドイメージマップはcantTellとして報告します。同じリンク先がキーボードで到達できるリンクとしても提供されていれば2.1.1を満たしますが、ルールではそれを検証できません。クライアントサイドイメージマップ(<map>/<area>)は検出しません。<img ismap>のない範囲は合格です。<img ismap>がリンクの外にしかない範囲はnotApplicableです。そこではismapは何もしないため、サーバーサイドイメージマップは存在しません(誤った位置にある属性は不正なHTMLで、バリデーターが扱う問題です)。

例

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>

クライアントサイドイメージマップにはismap属性がないため、そのままルールを満たします。(リンクの外にある<img ismap>は何もせず、ルールは該当なしになります。)

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

ismapはブラウザーがクリックの座標をサーバーに送ることを前提としているため、マップの領域にはキーボードで到達できません。同じリンク先がリンクとして提供されているかは人が確認します。このルールが不合格になることはありません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

SERVER_SIDE_IMAGE_MAP

  1. レポートに示されたイメージマップを見つけ、各領域をクリックしてそれぞれのリンク先を一覧にしてください。
  2. ポインターを使わずに、Tabキーでページ内を画像リンクまで移動してEnterを押し、何が起こるかを控えてください。
  3. 一覧にした各リンク先への通常のテキストリンクがページのほかの場所にないか探し、TabキーとEnterでそこに到達してたどれることを確認してください。

満たす場合:イメージマップのすべてのリンク先が、キーボードで機能するリンクとしても提供されています。

満たさない場合:一部のリンク先には画像上の位置をクリックしなければ到達できないため、WCAG 2.1.1を満たしません。

ソースコードを見る