画像の代替テキストはテキストとして繰り返さないでください

ボタンまたはリンクの alt 属性値に、対応する画像またはリンクに隣接するテキストと同じテキストを入れないでください。

悪い例:

たとえば、アイコン マークアップ <img alt="Home Page"/> の場合、隣接するテキストにも「ホームページ」と表示されます。このようなシナリオでは、スクリーン リーダーは、このコンテンツを「ホーム ページ ホーム ページ」としてユーザーに通知します。冗長性は不要であり、混乱を招く可能性があります。

ホームページ

<p><a href="index.html"><img src="images/home-icon.png" alt="Home Page" width="24" height="25">Home Page</a></p>

このシナリオでは、アイコン画像の alt 属性値は設定により空のままにしておく方が適切です alt=""。

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

画像ボタンの例

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

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

ボタンの代替テキストの目的は、視覚障害のあるユーザーに画像の内容と目的に関する情報を伝えることであることに留意してください。視覚障害のあるユーザーは、目の見えるユーザーが画像から受け取る情報と同等の情報を、画像の代替テキストから受け取る必要があります。代替テキストには、画像の意図、目的、意味を記載する必要があります。

ボタン画像の代替テキストを記述するときは、次の点に留意してください。

• ボタンにはどのような情報が表示されますか?
• ボタンの目的は何ですか?
• ボタンとして画像を使用できない場合、ボタンの情報や機能を伝えるためにどのような言葉を使用すればよいでしょうか?

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