アクティブ <area> 要素には代替テキストが必要です

ルールID: area-alt
ルールセット: 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.4.4: Link Purpose (In Context)
  • 4.1.2: Name, Role, Value

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

  • 2.4.4: Link Purpose (In Context)
  • 4.1.2: Name, Role, Value

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

  • 2.4.4: Link Purpose (In Context)
  • 4.1.2: Name, Role, Value

Section 508 ガイドライン

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

Trusted Tester ガイドライン

  • 6.A: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.

EN 301 549 ガイドライン

  • 9.2.4.4: Link Purpose (In Context)
  • 9.4.1.2: Name, Role, Value

修正方法

イメージマップ内のクリック可能な各 <area> に、リンクの目的を説明する alt、 aria-label または aria-labelledby 属性値があることを確認します。

<img> usemap 属性値を持つ要素は、 <map> 属性値によって定義されたクリック可能なホットスポットを囲む area タグのセットを使用するイメージマップを識別します。それぞれの代替テキストを定義するには、追加の alt 属性が必要です area: 

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

悪い例

マウスクリック座標に依存するサーバー側のイメージマップを使用しないでください。これらのマップはキーボードでアクセスできず、画像マップの操作可能な領域にテキストによる代替が提供されません。 

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

なぜ重要なのか

スクリーンリーダーには画像を文字に変換する方法がありません。イメージマップを含むすべての画像に alt テキスト値を持つことが重要です。

スクリーンリーダーは通常、代替テキストがない場合に画像のファイル名を読み上げます。ファイル名は画像を適切に説明しておらず、スクリーンリーダーのユーザーにとって役に立ちません。

ルールの説明

イメージマップは、クリック可能な領域が多数ある単一の画像です。すべての画像と同様に、スクリーンリーダーにはグラフィックスをテキストに変換する方法がないため、イメージマップには、 さまざまな領域ごとに代替テキストと、大きな画像自体の代替テキストが必要です。

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

area イメージマップの要素に代替テキストがあることを確認します。

リソース

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

GitHub で axe-core に貢献する

その他のリソース

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

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

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

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

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

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