[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

Start building more accessible experiences

Axe DevTools Pro helps dev 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)]

  • 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 指南

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

    修正方法

    正しいマークアップソリューション

    次の4つのマークアップの例は、それぞれ代替テキストとしてレンダリングされるマークアップが含まれているため、すべて合格となります。 

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

    誤ったマークアップソリューション

    マークアップに対応する意味のある代替テキストが含まれていないため、次の5つの例は 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 ルールの一覧 を参照する

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

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

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

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