画像ボタンには代替テキストが必要です

ルールID: input-image-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)]

  • 1.1.1: Non-text Content
  • 4.1.2: Name, Role, Value

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

  • 1.1.1: Non-text Content
  • 4.1.2: Name, Role, Value

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

  • 1.1.1: Non-text Content
  • 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 指南

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

EN 301 549 指南

  • 9.4.1.2: Name, Role, Value

修正方法

<input type="image"> に空でない alt、 aria-label または aria-labelledby 属性があることを確認してください。

画像ボタンは、 alt 属性をラベルとして使用します。alt 属性値を指定する必要があり、その値は明確かつ簡潔で、ユーザーがボタンをアクティブにしたときに実行されるアクションを表すものでなければなりません（画像自体の説明ではありません）。

画像ボタンの例

<input type="image" src="submit.png" name="submit"
  height="36" width="113" alt="Submit">

ボタンとして使用されるすべての画像に、アクセス可能な代替テキストがあることを確認します。

画像に代替テキストを追加する方法

  • alt 属性の使用方法、つまり <input type="image" alt="submit button">
  • an aria-label を使用するすなわち <input type="image" aria-label="submit button">
  • aria-labelledby を使用するつまり <input type="image" aria-labelledby="someElementID">

alt 属性または aria-labelを使用している場合は、空でないことを確認してください。aria-labelledby 属性を使用している場合、その属性が指すIDが存在し、スクリーンリーダーからアクセス可能であること（つまり、 display: none または aria-hidden="true"を使用したCSSで非表示になっていないこと）を確認してください。

代替テキストの書き方のヒント

alt テキストを書くときは、 alt テキストの目的が視覚障碍のあるユーザーに画像の内容と目的に関する情報を伝えることであることに留意してください。視覚障碍のあるユーザーは、目の見えるユーザーが画像自体から得るのと同じだけの情報を alt テキストから得ることができる必要があります。 alt テキストには、画像の意図、目的、意味を伝える必要があります。

alt テキストを書くときは、次の質問を念頭に置いておくと役立ちます。

  • なぜここに非テキストコンテンツがあるのでしょうか?
  • どのような情報が表示されていますか?
  • それはどのような目的を果たしますか?
  • テキスト以外のコンテンツを使用できない場合、同じ情報や機能を伝えるためにどのような言葉を使用しますか?

alt 特定の属性名に含まれるすべてのテキストが有用であることを確認してください。「チャート」、「画像」、「図」などの単語や画像ファイル名はあまり役に立たない傾向があるため、 alt テキストでは使用しないでください。

なぜ重要なのか

<input type="image"> ボタンには代替テキストが必要です。そうしないと、スクリーン リーダーのユーザーはボタンの目的を理解できません。画像にテキストのみが含まれている場合でも、スクリーン リーダーは文字の画像を出力に変換できないため、代替テキストが必要です。

テキストだけではラベルにはなりません: フォーム要素の横にテキストを入力するだけでは、真のラベルを作成するのに十分ではありません。スクリーン リーダーなどの支援技術では、プログラムで決定できるコード内のラベルが必要です。一部のスクリーン リーダーは、周囲のテキストに基づいてラベルが何であるかを推測するようにプログラムされていますが、この方法は絶対確実ではなく、スクリーン リーダーが間違った推測をすると混乱を招く可能性があります。

ルールの説明

<input type="image"> 要素に代替テキストがあることを確認します。

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

すべての <input type="image"> にアクセス可能な名前があることを確保します。

リソース

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

GitHub で axe-core に貢献する

その他のリソース

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

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

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

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

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

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