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

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

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

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

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

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