ナビゲーションのスキップリンクを提供していますか?
JIS 5.3 h); WCAG 13.6; 508条 (h)
 
 
概要

もし、Webページにナビゲーションのリンク(ナビゲーションバーやリンク)がよくあるポジション(ページの上部、下部、あるいは左側か右側)にある場合、ノングラフィカルなブラウザのユーザーが、それらのリンクをスキップしてページのコンテンツ部分へ移動できるようなリンクを提供すべきです。

 
 
修正/チェック方法

もし、Webページにナビゲーション・バーのようなリンクがよくある位置にあるのであれば、ユーザーがその部分をスキップできるようなリンクを提供してください。最も簡単な方法は、同じページ内のコンテンツ開始位置にアンカーを置いて、"メニューをスキップして、このページの本文へ" というようなリンクをナビゲーション・バーの直前に置いて、ページ内リンクを提供することです。

より効果的な方法としては、適切なalt属性のついた透明のGIF画像をリンクとして用いる方法です。HTMLソースコード例:

   <a href="#content">
     <img alt="メニューをスキップして、このページの本文へ"
     src="spacer.gif" width="1" height="1">
   </a>

グラフィカルなブラウザのユーザーにはそのリンクが見えることはなく、ノングラフィカルなブラウザのユーザーにはその存在が分かって利用することができます。このとき、リンクのラベルに "ナビゲーション" という用語を用いないほうがよいでしょう。多くの一般ユーザーにとって、"ナビゲーション" という用語は馴染みがなく、何を指すのかが分からないというケースが少なくないからです。

 
 
修正/チェックのポイント

ナビゲーションバーやメニューなどが、ページの最初にあると、音声ブラウザはページを表示するたびに、ナビゲーションバーやメニューの内容を読み上げます。そのため、本文を読み上げるまでに時間がかかり、ページの内容が理解しにくくなります。

  • 各ページで使用している共通のナビゲーションバーやメニューなどは、音声ブラウザの使用時にスキップできるよう、本文へのページ内リンクを設ける。
    例えば、透過 gif に「alt="本文へ"」などのようにしてリンクを設定してもよい。
  • 透過 gif を利用して、「alt="ここからメニュー"」など、ページ内の各エリアについて、補足説明を記述することが望ましい。
  • ページのヘッダーに該当するナビゲーションバーや、画面の左側に表示されるメニューは、できるだけ小さくすることが望ましい。
  • XHTMLとスタイルシートを使用し、本文を先に読み上げ、メニューを後で読み上げる方法をとってもよい。

『富士通ウェブ・アクセシビリティ指針 第2.0版』 © 2004 富士通株式会社

 
 
JIS関連項目

5.3 操作及び入力
h)
共通に使われるナビゲーションなどのためのハイパリンク及びメニューは,読み飛ばせるようにすることが望ましい。
参考 ナビゲーションバーのようにページの上部にあるものは,音声ブラウザなどでは毎回読み上げられ,本文に到達するまでに多くの時間を浪費する。そのため利用者が必要に応じてスキップできる仕組みを設ける必要がある。
HTML では,ハイパリンク及びメニューの前に本文などへのページ内ハイパリンクを設けることによってスキップできるようにする。

JIS X 8341-3:2004『高齢者・障害者等配慮設計指針-情報機器における機器,ソフトウェア及びサービス-第三部:ウェブコンテンツ』(© 財団法人 日本規格協会)

 
 
解説

Web制作者は、よくナビゲーションのリンクをWebページの上部、下部、あるいは左側か右側のような位置に配置します。もし、画面を見ているユーザーがWebページあるいはサイトにやってきて、ナビゲーションのリンクを選択するのではなく、そのページのコンテンツを読みたい場合は、単にリンク部分を無視して、読みたい部分のテキストを読み始めます。しかしながら、スクリーンリーダー、あるいはその他の支援技術を使用しているユーザーは、支援技術がそのページのコンテンツ部分にたどり着くまでに、それらのリンクを1つずつ順番に読み上げていくのを聞いていなければならず、それは退屈で時間の無駄な作業になりがちです。

この問題を解決するには、ユーザーが繰り返されるナビゲーションのリンクをスキップできる仕組みを提供することです。

 
 
JIS X 8341-3について

JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。

  • 閲覧:日本工業標準調査会(JISC)
    http://www.jisc.go.jp/
  • 購入:日本規格協会(JSA Web Store)
    http://www.webstore.jsa.or.jp/