ページ制作のアクセシビリティ指針
優先度1



解説

ハイパーリンクボタンとして指定されている画像やイメージマップのリンク領域に代替テキストが指定されていない場合に、音声ブラウザの中にはURLをそのまま読み上げてしまうものがあります。
また、音声ブラウザのユーザーの中には、ハイパーリンクテキストのみ順番に読み上げさせて情報を探す使い方をしているユーザーがいます。ハイパーリンク領域の代替テキストは、リンク先や動作を予測できる内容にします。


実例

  • a要素の中の画像(img要素)、area要素、type="button"であるinput要素のalt属性値に適切な代替テキストを指定します。
  • 装飾のための記号の場合は、二重読み上げに注意します。

イメージマップのalt属性値の場合

イメージマップのalt属性値の場合のイメージ。画像の一部に「くわしくはこちら」というボタン形状のリンクが指定されています。

悪い例:

alt="くわしくはこちら"

良い例:

alt="休日営業店舗についてくわしく。"

装飾のための画像等の場合

装飾のための画像(記号)の例。リンクテキストの左に三角の画像が配置され、ボタンであることを示しています。

この例の場合、img要素を使わずに、CSSのリストや背景画像を使う方法も検討

悪い例:

alt="サイトマップ"(二重読み上げとなる)
alt="三角"

良い例:

alt=""

動作と関係する画像の場合

ハイパーリンクの動作と関係する画像のイメージ。リンクテキストの左に別ウィンドウで開くことを表す画像がある例

画像中の米印部分の説明。別の新しいウィンドウを開くことを示す画像

悪い例:

alt=""

良い例:

alt="新しいウインドウを開きます。"

当行における特記事項:

「くわしくはこちら」「ここをクリック」等の表現を画像上で用いている場合、alt属性のテキストは明確になるようにする。
アイコンが特定の動作を示しているケースでは、どのような動作をするかを指定する。



関連するJISの項目

5.4 b (必須)




アクセシビリティガイドライン トップ

このページの先頭へ戻る