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

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

画像ボタンは alt 属性をラベルとして使用します。alt 属性は提供されなければならず、明確かつ簡潔に、そしてユーザーがボタンを実行したときにどのような動作をするかを表す必要があります (画像そのもの説明ではありません)。

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

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

画像に代替テキストを付与する方法

• <input type="image" alt="submit button"> のように、alt 属性を使用する
• <input type="image" aria-label="submit button"> のように、aria-label を使用する
• <input type="image" aria-labelledby="someElementID"> のように、aria-labelledby を使用する

alt 属性または aria-label を使用している場合、それらが空ではないことを確認しましょう。aria-labelledby 属性を使用している場合、そのIDが指し示す内容が存在し、スクリーン・リーダーにとってアクセシブルであることを確認しましょう (つまり CSS の display: none や aria-hidden="true" で非表示にされていない)。

代替テキストを書く時のヒント

alt テキストを書く際は、alt テキストの目的が全盲のユーザーに画像のコンテンツや目的に関する情報を伝えることである点に留意しましょう。全盲のユーザーは alt テキストから、目の見えるユーザーが画像そのものから得るのと同じだけ情報を得られるようにするべきです。alt テキストは画像の意図、目的、そして意味を伝えるべきです。

alt テキストを書く際は、次の質問に留意すると良いでしょう:

• 非テキストコンテンツはなぜここにあるのでしょうか？
• それはどのような情報を提示しているのでしょうか？
• それはどのような目的を果たしているのでしょうか？
• もし非テキストコンテンツを使用できない場合、同じ情報あるいは機能を提供するために、どのような言葉を使うでしょうか？

alt 属性に含まれているすべてのテキストが役に立つものであることを確認しましょう。「チャート」「画像」「図」などの単語や、画像のファイル名は通常あまり役に立たないため、alt テキストの中で使用されるべきではありません。