サーバーサイドイメージマップは使用しないでください

ルールID: server-side-image-map
ルールセット: axe-core 4.10
ユーザーへの影響: 軽微
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

Start building more accessible experiences

Axe DevTools Pro helps development teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact

Disabilities Affected

  • 視覚障害
  • 視聴覚障害
  • 運動障害

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 (A)]

  • 2.1.1: Keyboard

WCAG 達成基準 [WCAG 2.0 (A)]

  • 2.1.1: Keyboard

WCAG 達成基準 [WCAG 2.2 (A)]

  • 2.1.1: Keyboard

Section 508 ガイドライン

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (f): Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Trusted Tester ガイドライン

  • 4.A: All functionality can be accessed and executed using only the keyboard.

    修正方法

    すべてのサーバー側イメージマップをクライアント側イメージマップに変更する。

    悪い例

    サーバー側のイメージマップを使用しないでください。

    <a href="/maps/nav.map"><img src="/images/navbar.gif" ismap></a>

    良い例

    クライアント側のイメージマップは、 <img> 要素に含まれます。これらには、イメージ マップの名前 ( <img usemap="myImageMap" src="..." >) を含むusemap属性があります。<img> 要素の後に、マップ上でクリック可能なホットスポットが定義されるスペースを囲む <map> 要素のセットが次のようにあります。 

    <img src="images/solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#Map"/>
<map name="Map">
    <area shape="rect" coords="115,158,276,192" href="http://en.wikipedia.org/wiki/Mercury_%28planet%29" alt="Mercury">
    <area shape="rect" coords="115,193,276,234" href="http://en.wikipedia.org/wiki/Venus" alt="Venus">
    Remaining hotspots in image map...
</map>

    なぜ重要なのか

    サーバー側のイメージ マップはキーボードでアクセスできません。イメージに含まれるリンクにアクセスするにはマウスをクリックする必要があるため、ナビゲーションにキーボードのみを使用するユーザーはイメージにアクセスできません。

    サーバー側イメージ マップは、マウス クリックの座標を、イメージ マップの処理に使用されるサーバー側スクリプトに渡します。これらはマウスクリックに依存するため、キーボード操作に対応していませんが、クライアント側のイメージマップはキーボードでアクセスできます。さらに、クライアント側イメージ マップの area のように、サーバー側イメージ マップの操作可能な領域に代替テキストを提供することはできません。

    ルールの説明

    ドキュメントには、クライアント側ではなくサーバー側のイメージ マップが含まれています。

    仕組みについて (簡単に言うと)

    サーバー側のイメージマップが使用されないように確認してください。

    リソース

    Deque University コースのページ (要登録)

    GitHub で axe-core に貢献する

    その他のリソース

    その他リソースもあわせてご参照ください。

    axe 4.10 ルールの一覧 を参照する

    この情報は役に立ちましたか?

    すでにフィードバックをいただきました、ありがとうございます。.

    あなたの回答は次のとおりです。

    この情報は役に立ちましたか?
    フィードバックが提出された日付/時刻: