ナビゲーションスキップは主に音声ブラウザ向けに、グローバルナビゲーションなどをスキップするために実装されるものだが、前々からずっとナビゲーションスキップをどのように書けば最適なのか、についてはずっと疑問に思ってきた。というわけで、調べてみた。
前提：まずは最適なHTML（XHTML）を書くこと。
これが大前提。音声ブラウザによっては、heading要素（h1とかh2）を順にスクロールすることができるから。というわけで、XHTML＋CSSによるWeb標準での実装は大前提。というより、これをしっかりと書いておけば、ナビゲーションスキップを埋め込まなくても、音声ブラウザにとってはテーブルレイアウトに比べて、かなり便利になるようだ。
検討事項その1：そもそもナビゲーションスキップは見えるようにすべきか否か。
ナビゲーションスキップを見えるようにするべきか、しないべきかについて、まず考えておく必要がある。例えば、456 Berea Streetなどではナビゲーションスキップがロゴ上部に設置されており、音声ブラウザ、非音声ブラウザでも利用できる。
ナビゲーションスキップは音声ブラウザ利用者だけが使うものではないから、もちろん目に見えたほうが使い勝手はよい。ただ、デザイン的にはコンテンツの最上部に配置しなければならないことが多いため、どうしてもデザインとの両立は難しい。そんな場合は、The Web Standards Projectのように、マウスを持っていくと、hoverでナビゲーションスキップが出てくるという手法も検討してもよいとは思う。（ただし、このマウスを上部に持ってくるとナビゲーションスキップが出てくるという手法が一般的ではないため、サイト閲覧者が実際に利用するのか、という疑問は残る）
一方、ナビゲーションスキップを見えないように実装する場合は、主に2通りの方法がある。
- spacer.gifにリンクを貼って、alt属性をつける。
- CSSで非表示にしてしまう。
spacer.gifを用いているのは、日本IBMや富士通など。でも、個人的にはせっかくWeb標準で実装しているのなら、ここもCSSで実装したい。例えば、XHTMLがこんな感じ。
<div class="hidden"> <ul> <li><a href="#jumpcontent">本文へジャンプ</a></li> <li><a href="#jumpmenu">サイドメニューへジャンプ</a></li> </ul> </div>
CSSは幾種類か実装方法がある。Stylesheet Stylebookを参考にすると、
div.hidden{ position: absolute; left: -200px; width: 100px; }
こんな感じ。僕自身は、
div.hidden { position: absolute; /* For Mac IE 5*/ top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
こんな感じ。ここで、唯一気をつけなければならないのは、display: none;を使ってはならないこと。音声ブラウザではボックスそのものが読み上げられないことがあるから。
検討事項その2：ページのどこに、どういうふうに配置するのか。
ナビゲーションスキップは多くのサイトでは、ロゴ上部に配置されることが多い。（例えば、ロゴを指定するh1要素の上など）しかし、音声ブラウザ利用者にとっては、この方法に問題もある。ユニバーサルワークスのコラムによると（ちなみに、「私」と書いている人自身が音声ブラウザ利用者）、
私：ページの一番上（読み上げの最初）に置くのはやめてね。
制作：どうして？
私：ページに入ってすぐエンターキーを押せというのは酷ではないか！やってみな。
制作：なるほど。
私：いちいちシフト＋Tabで戻らないといけないわけよ、もううんざり。タイトルタグの直後は聴き逃しやすいし、そうそう、音声ブラウザのデフォルトではタイトルタグはそのページに入ったとき1回しか読み上げないから、ページの一番上にはもう1回ページ見出しを書いておいてもらえるとうれしいね。
ということらしい。というわけで、実装方法にもよるが、ナビゲーションスキップはロゴ、もしくはh1要素の下に置いたほうがよい。
しかし、そもそもナビゲーションスキップを音声ブラウザ利用者が使った場合、サイト内で迷子になってしまうこともあるようだ。これもユニバーサルワークスに詳しく掲載されているので、じっくり読んでほしい。
ナビゲーションスキップで迷子／アクセシビリティコラム｜ユニバーサルワークス
また、Alertboxはナビゲーションスキップの使用は避けようということを提唱しており、それこそ音声ブラウザ向けのナビゲーションスキップと反対の意見のようだが、本文真ん中あたりに「ナビゲーションスキップが使えるとき」という記述があり、全面的に反対しているわけではない。この「ナビゲーションスキップが使えるとき」には、通常のリンクが別ページに移動するということに該当するのなら、ナビゲーションスキップは通常のリンクとは違い、該当箇所にジャンプするという旨をきちっと表示すべきだとしている。
このあたりの考慮すると、実装方法としては次のような形が「まあ、マシなほうかな」と思う。
<div class="hidden"> <p>本文とサイドメニューへジャンプするためのナビゲーションスキップです。</p> <ul> <li><a href="#jumpcontent">本文へジャンプ</a></li> <li><a href="#jumpmenu">サイドメニューへジャンプ</a></li> </ul> </div> <h1>ロゴを設置する</h1>
上記の原則に反して、ロゴ上部にナビゲーションスキップを置いているが、p要素で説明することによって、リンクの存在を確認してもらう。また、この方がナビゲーションスキップを見えるようにしてデザインする場合、まとまりもよくなると思う。
また、ナビゲーションスキップを見えるようにして、且つデザインをうまく仕上げるためには、もう少しCSSを細かく書いて、p要素にclass属性を当てて、非表示にしてもよいかもしれない。
また、実際にたどり着く箇所には、
<p class="hidden" id="jumpcontent" name="jumpcontent">本文のエリアです。</p>
と書いておく。後方互換性への配慮のため、id属性もname属性も書いておいたほうがよい。
検討事項その3：ナビゲーションスキップをどのように表現するか。
海外のナビゲーションスキップは大体「skip to main content」という記述が多い。それに影響されてか、CSSに詳しい日本語のブログもこの記述が多い。しかし、このナビゲーションスキップを利用する音声ブラウザ利用者にとって、この「skip to main content」という表現が分かりやすいのかが正直疑問である。それよりも、官公庁のサイトで多く使われている「本文へジャンプする」という記述のほうが分かりやすいと思う。
また、この表示を短くしすぎると（例えば、「本文へ」という一言）、音声ブラウザではリンクをクリックするのに間に合わないという問題が発生するようだ。またもや、ユニバーサルワークスから引用すると、
音声ブラウザを最速で操る私が悪いと言えば悪いが、ここにそのボタンがあるとわかっていても、ポンッと飛べないのである。矢印キーやTabキーで追えば当然追えるが、スキップボタンの利用者の多くは、そのサイトのリピーターなのである。ポンッ、ポンッと飛び跳ねたいわけである。ゲームのように取り組んでみたが、「本文へ」の「へ」の直後でしかエンターキーを押すことができない。間に合わないのである。贅沢なお願いで申し訳ないが、もう少し長いテキストにしていただけるとありがたい。
ということだ。というわけで、日本語で分かりやすく、更にある程度の長さの文章が求められる。
また、この表現に関連してだが、よくページのコンテンツ最下部あたりに「back to top」などのページ最上部に戻るリンクがある。もちろん、音声ブラウザ、非音声ブラウザ共に使いやすいナビゲーションスキップではあるが、2つの課題がある。
- そもそも「top」はどこを指し示しているのか。ページの最上部なのか、それともサイトのトップページなのか。海外サイトはページ最上部を「top」と表現し、サイトのトップページを「home」もしくは「main」で表示していることが多いが、日本語のサイトでは「home」をトップページと言ったりするので、一般的な表現方法が決まっていない。
- 上記でも紹介した音声ブラウザのユーザーがサイト内で迷子になることがある。その理由としては、ナビゲーションスキップが1ページに多すぎるというときもある。本当にページ最上部へ戻るリンクは必要なのか、という疑問。
この2つは検討しておく価値がある。
というわけで、ナビゲーションスキップを実装する際の注意点や方法を考えてみた。もちろん、レイアウト構成が単純であるならば、ナビゲーションスキップを設置しないという方法もありだということはお忘れなく。
追記（12月28日）
はてブのコメントを受けて、表記をページ内リンクからナビゲーションスキップに変更した。
