を含む要素role="img"には代替テキストがあります

ルールID: role-img-alt
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549
 

Accessibility testing for dev teams - No experience required

Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.

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

  • 1.1.1: 必須: Non-text Content

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

  • 1.1.1: 必須: Non-text Content

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

  • 1.1.1: 必須: Non-text Content

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

  • 7.A: 必須: The accessible name and accessible description for a meaningful image provides an equivalent description of the image.

    修正方法

    正しいマークアップ方法

    次の四つのマークアップ例は、各例が代替テキストとして機能するマークアップを含むため、合格します:

    <div id="match">Bananas</div>
<div role="img" aria-labelledby="match" id="pass2"></div>
 
<div id="hidden-match" style="display:none">Banana bombs</div>
<div role="img" aria-labelledby="hidden-match" id="pass3"></div>
 
<div role="img" aria-label="blah" id="pass1"></div>
 
<div role="img" title="title" id="pass4"></div>

    不適切なマークアップ方法

    次の五つの例は、対応する意味のある代替テキストをマークアップに含まないため、role-img-alt というルールに不合格になります:

    <div role="img" id="violation1"></div>
 
<div role="img" aria-label="" id="violation2"></div>
 
<div role="img" alt="blah" id="violation3"></div>
 
<div role="img" aria-labelledby="no-match" id="violation4"></div>
 
<div role="img" title="" id="violation5"></div>

    なぜ重要なのか

    スクリーン・リーダーは、画像がテキストのみで構成されていたとしても、ユーザーに読み上げるような、画像を言葉に変換する方法を持ちません。そのため、スクリーン・リーダーのユーザーが画像のコンテンツと目的を理解するには、画像に短く、説明的でアクセシブルな代替テキストを提供する必要があります。

    見ることができない場合、スクリーン・リーダーが音声や点字に変換できるアクセシブルなテキストによる代替がなければ、画像を含むすべての種類の視覚的な情報はまったく役に立ちません。ロービジョンや色覚障害のある人も、アクセシブルな代替テキストを必要とすることがあります。

    スクリーン・リーダーは、画像と関連付けられたアクセシブルなテキストによる代替が不足している場合、視覚的な画像の情報を音声あるいは点字に変換できません。

    ルールの説明

    role="img" 要素としてマークされた要素に代替テキストが存在することを確認します。

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

    role="img" 属性値を持つ要素は、画像を説明するアクセシブルな代替テキストを指定するマークアップも含まなければなりません。

    リソース

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

    GitHub で axe-core に貢献する

    その他のリソース

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

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

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

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

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

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