CSSを使ってJavascriptのロールオーバーイメージを実現する方法は既に一般的になって、あちこちのサイトでも見られるようになりました。
ところが、問題点をいくつか見つけたので書いておきます。
自分のサイトの粗が出る「諸刃の刃」のような記事になりそうで本当は書きたくなかったんですが...
- まずはじめにCSS背景切り替えの概要
- Firefox1.5でクリックした時に左に長い点線の枠が出現する
- タブキーで現在位置が分からなくなる
- 解決策というより、気休め的な方法
- 過剰な見栄え制御
- 決定的な回避策(アクセシビリティ向上案)
まずはじめにCSS背景切り替えの概要
あちこちのサイトやCSS関連の書籍
リンクの画像にマウスが重なるとその画像が切り替わるという仕掛けです。
このサイトのヘッダー部分にあるナビゲーションが分かりやすい例です。HTMLではただのテキストリンクなのですが、そのテキストの背景をCSSで指定することで実現しています。また、画像が切り替わる原理は、a:hoverに背景を指定することで実現しています。
メリットは大量のHTMLを触らずにCSS一枚を編集するだけで修正でき管理が楽になるということです。
このサイトは一枚の背景画像を背景の位置を変える事でこれを実現しています。
使っている画像はこれ一枚です。
もともとのテキストは
#xx a {
text-indent: -1000em;
}
で画面外へ吹っ飛ばしているわけですが、ここでひとつ問題が。
Firefox1.5でクリックした時に左に長い点線の枠が出現する
最近リリースされたFirefox1.5から、どうもこのあたりの仕様が変わったらしくクリックした瞬間にtext-indentで画面外に飛ばしているテキストの場所からフォーカスされた点線が表示されるようになりました。Flockも同じ現象が起きるので、Geckoエンジン自体の仕様が変わったのではないかと思います(詳しくはわかりません)。
この点線がどうも不細工だったので以下の方法で解決しました(WinIEでは効きません)。
#xx a {
outline: none;
}
これで、点線を消すことができます。たぶんCSS関連の情報に敏感な方は知っていると思います。
ところが、この方法には大きな落とし穴があったのです。
タブキーで現在位置が分からなくなる
そんなに利用している人や意識している人もいないと思いますが、マウスを使わずサイトを閲覧する際、リンクを辿るにはキーボードのタブキーを使います。例えばマウス無しでノートパソコンなどを使う時です。
リンクをフォーカスしているのを表すのが上記の点線の枠なわけです。「このリンクに今フォーカスしていますよ」と点線で囲んで表しています。(MacIEでは点線じゃなくて緑色の枠線)。
その点線を「見栄えが悪い」って理由で消すと、リンクをフォーカスした際に何も表示されません。
すると、今どこをフォーカスしているのか分からなくなる。アクセシビリティが云々となるわけです。
(MacIEはテキストを吹っ飛ばした時点で枠線が表示されなくなる？)
もし、自分のサイトでこの方法(text-indentでテキストを飛ばす)をやっている方がいればタブキーで自分のサイトが問題なく移動できるか(自分の居場所がわからなくならないか)確かめてみてください。
解決策というより、気休め的な方法
#xx a:hover,
#xx a:focus {
背景関連の指定
}
a:hoverと同じ指定をa:focusにも指定することで、マウスオーバー時の状態をタブフォーカス時にも適用できるようになります。自分も気づいて慌てて指定しました。
実際、タブキーでリンクを辿ると突然ページ下に飛んだりするのでマウスオーバーじゃない時の状態が分からないと、画像に変化があったことが分かりにくいかもしれません。ですので、飽くまで気休めです。しかしながら、指定しないよりマシかと思います。
過剰な見栄え制御
text-indent: -xxxxemという指定は上に書いたように問題が多く、画像をオフにするとリンク自体が見えなくなってしまうという大きな問題もあります。
回線速度が速くなった今ではそれほど画像オフにする人はいないかも知れないですが、携帯電話がCSS対応になったとき、この問題が大きくなってくるのではと思います。
HTMLは簡素、見栄えはCSSというのがWeb標準の基本ですが、この方法は「過剰な見栄え制御」だと私は思っています。
と、まあ自分のサイトを眺めながら将来を不安に思っている今日この頃でありました。
ところで、フォーム関連でtabindex属性(もしくはonkeypress属性)を指定するとうまくタブ移動ができなくなるんですけど...。
どうなの?Another HTML-lintさん。全部のアンカーにtabindex指定しろってこと...？それ、無理...。
決定的な回避策(アクセシビリティ向上案)
CSSをあれこれ触っているうちに、決定的な回避策が見つかったので追記しておきます。
以下のようにCSSに記述すると、点線を消すことなくフォーカスエリアだけに点線を表示させることができるようになります。
a {
overflow: hidden;
～その他の指定(省略)～
}
overflowでリンクエリアからはみ出した部分を隠してしまうわけです。Firefox1.5で確認しました。
これでアクセシビリティを多少確保できるかと思われます。
MacIEでリンクが消失
一筋縄ではいかないもので、MacIEで自分のサイト見てみるとoverflow:hiddenを使ったリンクがすべて消失しておりまして、気づかなかったというより忘れていたMacIEのバグ。下記リンク先で詳しく書かれています。
というわけで、下記のように回避。
a {
/*\*/
overflow: hidden;
/**/
～その他の指定(省略)～
}
そもそも、ウチのサイトはMacIEでえらい表示になっているんですがね。
