Skill Archive

先日、ナビゲーションのロールオーバーについて以下のようなご質問をいただきました。

グローバルナビゲーションをJSで制御しているサイトもあれば、CSSの背景で制御しているサイトもあるけど、結局どれがベストなの？

まず、テキストは元より、画像であっても代替テキストを指定すれば『コンテンツ』というレベルで情報は確保できるので、テキストが良いか、画像が良いかということについては個人的にどちらでも良いと思っています。マークアップの観点では、グラフや地図、写真イメージなど、テキストでは補えない性質の情報を提供する場合はimg要素でマークアップするべきだと思いますが、ナビゲーションはあくまでサイト内を遷移するための"機能"であるため、その役割を果たすことが最も重要なのではないかと思います。

また、ナビゲーションにはサイト内を遷移するという役割のほかに、現在位置を把握するという役割も担っているので、ロールオーバーやカレント表示などの機能も備わっていなければなりません。どの手法がベストなのかを検討するには、画像を非表示にするユーザやCSSを無効にするユーザへの配慮がなされているかといった『見栄え』による部分と、JSを無効にしているユーザへの配慮がなされているかといった『ふるまい』の部分を把握した上で考慮する必要があります。では、実際にいくつかの手法を再現しながら検証していきましょう。

CSSで画像置換を行う

テキストをtext-indent:-9999pxで飛ばして背景画像を表示させる手法で、しばらくの間主流になっていました。しかし、画像を非表示にした環境下でテキストが表示されなくなるという問題は、モバイルでの閲覧や回線状況、テキストブラウザや音声ブラウザなどの閲覧環境においてアクセシビリティ上、致命的な問題を生じる可能性があります。また、テキストを飛ばす、或いは消して画像に置き換えるという手法上、SEOスパムと判別される可能性があります。画像置換にはメリットも色々とあるのですが、それを上回るデメリットがあるため、現在では使用が控えられている傾向にあるようです。

JSをオフにした場合

CSSで制御しているため、問題なく機能する

画像をオフにした場合

テキストが表示されず、環境によってはナビゲーションとして機能しない

CSSをオフにした場合

適切にマークアップされていれば最低限のアクセシビリティは確保されるので問題なし

画像をJSで入れ替える

img要素で定義されているため、画像を非表示にした環境でも代替テキストが表示されます。これで、画像置換で起こる「テキストが表示されなくなる」という問題は解消されますが、JSを無効にすると今度はロールオーバーが機能しなくなります。よくJSでロールオーバーさせるメリットとして「CSSが無効の環境でも画像が保持される」ということが挙げられているのですが、おそらくCSSを必要としない環境下では画像そのものよりも適切な代替テキストが指定されているかの方が重要なのではないかと思います。その考え方に基づくと、CSSを無効にした環境下でJSによる挙動が本当に必要なのかという疑問も生じます。ロールオーバーが機能しないことは、差したる問題ではないとは思いますが、先に挙げたような"副作用"と天秤にかけて使用を検討する必要があるかもしれません。

JSをオフにした場合

JSで制御しているため、ロールオーバーが機能しない

画像をオフにした場合

代替えテキストが表示されるので、適切なAltが指定されていれば問題なく機能する

CSSをオフにした場合

適切なAltが指定されていれば最低限のアクセシビリティは確保されるので問題なし

画像をCSSで入れ替える

こちらもimg要素で定義を行うのですが、JSは使用せずにCSSだけでロールオーバーを実現しています。概要としては、img要素を囲うブロックにロールオーバー時の背景画像を適用させ、マウスオーバー時に画像を非表示にするというものです。JSを無効にした状態でもロールオーバーが機能し、かつ画像を非表示にした状態でも代替テキストが表示されるので、決定版はこれだ！と言いたいところなのですが、ロールオーバー時に背景画像を指定しているため、画像を非表示にした状態でマウスオーバーすると何も表示されなくなってしまいます。代替テキストが表示されるためサイト内での遷移は問題なく行えると思いますが、マウスオーバー時やカレント時に色が変わるなどといったユーザビリティが確保できないため、ユーザーに無駄なフラストレーションを与えてしまう可能性があります。

JSをオフにした場合

CSSで制御しているため、問題なく機能する

画像をオフにした場合

代替えテキストが表示されるが、ロールオーバーやカレント表示の際にテキストが表示されなくなる

CSSをオフにした場合

適切なAltが指定されていれば最低限のアクセシビリティは確保されるので問題なし

新・画像置換

上記では、画像置換にはメリットを上回るデメリットがあるため、使用を控えるという話でした。しかし、もしそのデメリットが解消されたらどうでしょうか。『DKIR』という手法を使えば、画像が非表示の状態でもテキストが表示され、かつCSSで制御しているため、JSを無効にした状態でもロールオーバーが機能します。デザイン変更などがあった場合、マークアップに手を加えることなく画像の差し替えが行える、『CSS Sprite』を利用してhttpリクエストを減らせるなどといった、画像置換の恩恵のみを受けられることになります。SEOスパムについては、その定義の曖昧さや判断基準が明確でない以上、結論が出せないのでここでは棚上げにします。少なくともDKIRという手法はテキストを飛ばすわけでも、消すわけでもなく、背景画像の背面に隠すという手法であるため、画像置換におけるアクセシビリティの問題は解消できるはずです。しかし、そんなDKIRも万能というわけではなく、要素を重ねるという手法上、背景画像に透過PNGが使用できないという制約があります。

詳しくは「これで決まり？な画像置換 - DKIR | CSS-EBLOG」をご覧下さい。

JSをオフにした場合

CSSで制御しているため、問題なく機能する

画像をオフにした場合

代替えテキストが表示されるので問題なく機能する

CSSをオフにした場合

適切にマークアップされていれば最低限のアクセシビリティは確保されるので問題なし

4つの手法を紹介しましたが、どれがベストであるということはあえて明言しません。なぜなら、どれがベストであるかは時と場合によって異なるからです。JSを無効にした場合、画像を非表示にした場合、CSSを無効にした場合について検証したのは、それぞれの手法の長所と短所を明確にするためであって、優劣を決めるためではありません。一つの手法しか知らなければ何を疑うでもなくそれだけを使用し続けることになりますが、他の手法を知っていればそれだけ引き出しが増えることになり、時と場合によって相応しい選択が行えるようになります。

1つだけ個人的な意見を述べるとしたら、ナビゲーションというのは"機能"としての役割を全うしてくれればそれで良いと思います。例えば、一つタグなどを挟まないとその機能が実現できない、というならば躊躇せずに挟むべきだと思います。「spanタグが入ると気持ち悪い」というのはとても分かりますが、そのTPOにおいて何が必要で、何が不要なのかを判断するには、やはり相応の知識が必要になります。これは何にでも言えることだとは思いますが、あらゆる手法や考え方を"身に付ける"まではいかなくとも、"知っている"だけで全然違います。一つの手法や考え方に固執するのではなく、広い視野を持って取り組みましょう。