10Dec2007

CSS ロールオーバーのアクセシビリティを少し考えてみた

Article entry published at 22:45 | 0 | 0

グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの^[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。

画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。

画像はCSS Nite LP3の課題のものを利用させていただいています。

サンプル

下の画像の上にポインタを持ってきてみてください。

使用した画像ファイル

わかりやすいように2pxのボーダーと背景色を設定しています。

viewmore.gif

HTMLで利用した画像です。

viewmore-hover.gif

CSSのhover時に利用した画像です。上半分が透明になっています。

HTMLコード

<a href="#" class="viewMore">
  <img src="viewmore.gif" alt="過去の記事一覧を見る" width="142" height="20" />
</a>

CSSコード

a.viewMore {
  display: block;
  width: 142px;  /*画像の横幅*/
  height: 20px;  /*画像の縦幅*/
  background: transparent url("viewmore-hover.gif") no-repeat 0 0;  /*hover時の画像を読み込む*/
  text-decoration: none;
}
a.viewMore:hover {
  text-indent: -9999px;  /*hover時だけ画像を飛ばす*/
  background-position: 0 -20px;  /*背景をずらす*/
}

各OFF環境での動作

CSS OFF時: イメージがそのまま表示される。
hover時は変化なし。
画像OFF時: イメージの代替テキストが表示される。
hover時はtext-indentで文字が見えなくなってしまう。
JavaScript OFF時: 問題なし。

考察

うーん、完全に解決してないですね。最近は携帯からのアクセスが増えて画像をOFFにして見ている方もいるようですからとりあえずの対応になるのかもしれません。hover時のことも考えるのならJSを利用した方がよいでしょう。

text-indent: -9999px;ではなくvisibility: hidden;も試してみましたが、表示が前者の方が目でわかるほど早かったのでそちらを採用しています。

別にimg要素が隠してくれるから、上半分透明な背景画像を用意しなくてもいいかも。

HTMLの方の画像に透過gifを使っている場合などには必要ですね。

画像OFF時に何も見えなくなりアクセシビリティ的にかなりよくない [back]