「スキップナビゲーション」を実装する

(2011年8月3日追記)

当サイトでは、その後リニューアルに伴い、スキップナビゲーションを廃止しています。詳しくは「サイトリニューアルのおしらせ (情報デザインの見直しと HTML5 化)」をご参照ください。

スキップナビゲーションとは、Webページの冒頭(ナビゲーションメニューの手前)に設置されたページ内リンクのことで、そのリンク箇所で[Enter]キーを押す(あるいはクリックする)と、ナビゲーションメニューを通り越して、本文が始まる位置にジャンプすることができる機能です。「JIS X 8341-3:2010」で「ブロック・スキップ」と呼ばれているものです(箇条番号7.2.4.1)。

特に音声ブラウザやスクリーンリーダーなどの支援技術を使ってWebページ上の情報を「上からひとつずつ順番に」見ている(聞いている)ユーザーにとっては、同一サイト内のページや何度か訪れているページを開くたびに生じる問題、つまり「いちいちナビゲーションメニューをすべて見て(聞いて)からでないとページのメインコンテンツに辿り着けない」といった煩わしさを解消することができる、便利な機能と言えるでしょう。

英語圏で開発されている支援技術(音声読み上げツール)の多くは、[H]キーを押してページ内にある<h1>から<h6>の見出し要素(つまりWebページ内の「情報の基点」)を行き来できる見出しナビゲーション機能が実装されているのが一般的なので(「JAWS」や「ホームページリーダー」、最近では「NVDA」など)、Web標準に沿って適切に見出しをマークアップしていれば、必ずしもスキップナビゲーション機能は要らないのでは?という議論もあるようです。ただし、日本で使用されている音声読み上げツールには、見出しナビゲーション機能を持たないものも少なくないので、アクセシビリティの観点から、特にナビゲーションメニューのボリュームが大きいサイトでは、念のためスキップナビゲーションを実装しておくほうがよいと思います。

参考情報:
視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007」という、日本国内における視覚障害者のパソコン、インターネット、携帯電話の利用状況を調査したレポートがあるのですが、それによると、パソコン使用時に使うスクリーンリーダーは国産の「PC-Talker」がもっとも多く、Web閲覧においては「ホームページリーダー」と「PC-Talker」が圧倒的のようです。

ただ、「ホームページリーダー」はInternet Explorer 6までしか対応しておらず今後のバージョンアップ予定もないため、今後は利用者が減るものと思われます。そうなると、見出しナビゲーション機能を持たない「PC-Talker」のような支援技術にも対応するという意味で、スキップナビゲーションは有効と言えそうです。

さて、スキップナビゲーションを実装することになったとして、今度は「スキップのリンクは視覚的に明示すべきかどうか」について悩むかもしれませんね。視覚障害者でなくとも、キーボード操作でWebを閲覧しているユーザーは少なくないので、特にナビゲーションメニューの項目が多い場合は、スキップのリンクを明示するようにページデザインを施すのがベターではあります。そうすることで、ページを開いたときに「スキップナビゲーションがある」ことを事前にユーザーが認知しやすくなるからです(下図は、アライド・ブレインズさんが運営するWebアクセシビリティ情報サイト「A.A.O」のヘッダー部分です。「本文へ」というリンクが明示されているのがおわかりいただけるかと思います)。
スキップのリンクを明示した例

しかし現実的には、スキップのリンクが見えるようにページをデザインしようとすると、それがクリエイティブ面での「縛り」(制約条件)になってしまったり、ビジュアル的に収まりが悪くなってしまったり、というケースが多いのではないでしょうか。当サイトでは、多くのサイトでも応用できそうな形の実験として、リンクを敢えて視覚的に明示しない手法で、スキップナビゲーション機能を実装してみました。具体的には下記のとおりです。

  • <h1>要素(サイト名「Website Usability Info」)の下にスキップのリンクを配置する。リンクは画像ではなくテキストとし、<a>要素の中にわかりやすく簡潔なラベル(「本文へスキップ」)を記述する。
  • 本文の見出し(<h2>要素)の前に、スキップナビゲーションの着地点を配置する。着地点の<a>要素に、わかりやすく簡潔なテキストラベル(「ここから本文です」)を記述する。
  • スキップのリンクとその着地点は、CSSを使って、ページ上に明示されないようにする。ただし「display:none;」や「visibility:hidden;」を使うのではなく(支援技術が音声読み上げできなくなってしまうので)、positionプロパティを使って「場外に押しやる」形にする。

ご参考までに、当サイトをリニアライズ表示した状態(CSSの適用を無効にしてHTMLを「すっぴん」にした状態)を図示します。こちらをご覧いただければ、どのような読み上げ順序の中で、どのようにスキップナビゲーションを配置したか、おわかりいただけるかと思います。
当サイトのスキップナビゲーション

細かいことを言うと、残念ながら音声読み上げツールの種類によって様々なバグがある(スキップナビゲーションのマークアップをどう解釈するかというクセがツールによってバラバラである)ため、あらゆる音声読み上げツールで問題なく読み上げられるようにするためには、対処療法的なハックが必要のようです。ただ、できるだけWeb標準に則った「きれいな」HTMLコーディングをしたい(アクセシビリティを実現するための前提として本来そうあるべき)ことから、当サイトではこのようなハックは用いていません。ちなみに、当サイトにて以前紹介した無料で入手可能な音声読み上げツール(「Fire Vox」「ALTAIR for Windows」「NVDA」)を使ってみたところ、いずれも当サイトのスキップナビゲーションは適切に機能したので、問題ないと言えるでしょう。特に「Fire Vox」や「ALTAIR for Windows」には、見出しナビゲーション機能がないので(Fire Voxでは、見出しリストを別枠で表示して、そこから読みた上げたい見出しを選択してジャンプすることはできるのですが、文脈の中で見出しを行き来することはできません)、今回実装したようなスキップナビゲーション機能は多少なりとも役に立つかな、と思っています。

なお、このスキップナビゲーションを使って、どこにスキップさせるか(どこを着地点にするか)については、議論の余地があるところかもしれません。当サイトでは、本文の見出し(コラム記事の表題)の直前を着地点としていますが、ユーザーによっては、「このページがサイト内のどの位置づけにあるのか」を知りたいケースもあるかと思います。そこで当サイトでは、着地点のテキストラベル「ここから本文です」の後に、参考情報として「現在位置表示(パンくずリスト)は、このすぐ上にあります。」と続けて読み上げるように改良しています。