この記事は「CSS ロールオーバーのアクセシビリティを少し考えてみた」の続きです。
以前、画像のCSSロールオーバーについてアクセシブルな方法はないかと考えてみたことがありました。あれから約2年、新しいサイトのHTML組んでたら、たまたま違う方法を見つけたので覚え書きしておきます。
ブラウザの対応は、おそらくafter疑似要素(contentプロパティ)に対応するブラウザなら表示されると思います。つまり、IE7以前はそもそもロールオーバーにならないってことです。まぁそこはこの際いいんです[1]。
今回も画像はCSS Nite LP3の課題のものを利用させていただいています。
グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。
画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。
画像はCSS Nite LP3の課題のものを利用させていただいています。
久しぶりのエントリです。
試験勉強やらに追われていてこちらは疎かになってるのですが、今日は息抜きもかねてWCAN 2007 summerに参加してます。
今回も電源の近くの席をゲットしたので、書けるだけライブで書きます！
関連記事追加しました。
今やってます。CSS Nite in Nagoya 2007！今回はMacを持ち込んでるのでバッテリの持つ限りなるべくライブで更新します。テーマ2まで更新して、バッテリ切れました＿|￣|○ 残りは翌日に書いています。
(フォローアップ資料などの参考資料リンクは、後日ある程度揃ってから追加更新します。)
埼玉で働く会社員。Webデザインとは直接関係がない仕事をしてます。
几帳面で凝り性だけど、おおざっぱさはしっかり持っているO型。興味も知識も広く深くがモットーです。
Web制作に関するブログを中心に、フォントなどもマイペースに制作。
デザインがクールでコードがクリーンなサイトを目指してます。
2
0