ボタンとリンクのテキストは、代替画像で繰り返されるべきではありません

対応する画像またはリンクに隣接したボタンやリンクのテキストと同じテキストを alt 属性値の中に入れないようにします。

悪い例:

例えば、アイコンのマークアップ <img alt="Home Page"/> を前提とすると、隣接しているテキストにも "Home Page" と書かれています。このような状況では、スクリーン・リーダーはコンテンツを "Home Page Home Page" と読み上げます。この冗長性は不要で、混乱を招く可能性があります。

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 に含まれるすべてのテキストが役に立つことを必ず確認してください。「チャート」「画像」「図」などの単語や、画像のファイル名はあまり役に立ちません。