アクティブな<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
 

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

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

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

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

修正方法

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

usemap 属性が付与された <img> 要素は、area 属性値により定義されたクリック可能な箇所を囲む一連の <map> タグを使用するイメージマップを特定します。各 area に対し代替テキストを定義するため、追加の alt 属性が必要です:

<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 ルールの一覧 を参照する

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

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

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

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