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

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

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

軽微
▼
Minor
Critical

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 Guidelines

  • 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> 要素に含まれています。それらにはイメージマップの名前を含んだ usemap 属性が付与されています (つまり <img usemap="myImageMap" src="..." >) 。<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 ルールの一覧 を参照する

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

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

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

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