第32回 スキップリンクの実装テーブルレイアウトを卒業しよう
スキップリンクの実装
スキップリンクとは
スキップリンクとは、主にページ内先頭部分に配置されるページ内へのリンクのことを言います。スキップナビゲーションやナビゲーションスキップといった呼び方もあります。
- CSSの使い方を実用サンプルで学ぶ
-
XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。
- XHTML & CSS 実践講座
ページ先頭にはサイト内リンク（いわゆるメニュー）があることが多いですが、スクリーンリーダー（音声ブラウザー）を使っている場合に、毎ページで共通のナビゲーションが読み上げられてしまうと煩雑になってしまいます。
そこで、サイト内リンクより前にページ内へのリンクを配置し、サイト内リンクが読み上げられる前にメインのコンテンツに移動できるようにする、というのがスキップリンクの主目的です。
共通に使われるナビゲーションなどのためのハイパリンク及びメニューは，読み飛ばせるようにすることが望ましい。
とされています。
ただ、スクリーンリーダーのユーザーを対象として、視覚的に表示をしておく必要がない場合には、CSSを使うなどのテクニックで、「読み上げられるが表示しない」とするケースが多くあります。
スキップリンクのマークアップ
スキップリンクのマークアップは非常に様々な方法が考えられます。上記のJIS規格でも紹介されていますが、次のようなパターンがあります。
- a要素でマークアップし、隠さず表示させておく
- a要素でマークアップし、CSSで非表示にする
- a要素でマークアップし、CSSで画面外に配置する
- 背景と同色or透明のgifなどのalt属性にリンク先の説明を記述し、画像をa要素でマークアップする
- HTML構造上、メインコンテンツをサイト内リンクより上部に配置する
他にもさまざまなものが考えられますが、よく見かける手法は「a要素でマークアップし、CSSで画面外に配置する」です。HTMLの構造がシンプルにできる点、CSSで簡単に実装できる点が優れています。
例えばこんな感じです。
<div id="nav-skiplink">
<p>ページ内へのスキップ用リンクです。</p>
<ul>
<li><a href="#product-glasses">メガネの一覧</a></li>
<li><a href="#product-sunglasses">サングラスの一覧</a></li>
<li><a href="#topics">最新トピックス</a></li>
<li><a href="#campaign">キャンペーン情報</a></li>
<li><a href="#nav-footer">フッターナビゲーション </a></li>
</ul>
</div>
#nav-skiplink {
position: absolute;
top: -10000px;
left: -10000px;
}
単純な方法ですが、スキップ用のリンクのdivブロックをpositionプロパティで画面のはるか左上に飛ばしています。
その他にも、このような消し方もあります。
#nav-skiplink {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}
ただ、スキップリンクは、必ずしもスクリーンリーダーのユーザーだけに有用なものではないので、通常のマウス操作でも使えるように非表示にすべきではない、という意見や、そもそもページ内へのリンクの是非に関する議論もあります。
これが正解！とはここでは言い切れませんが、スクリーンリーダーのユーザー向けということであれば、アクセシビリティの向上に役立つのではないかと思います。
参考リンク
- スキップリンク とは | アクセシビリティ用語集 | ミツエーリンクス
- Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）
- X 8341-3:2004 「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第３部：ウェブコンテンツ」技術解説 第1.1版 委員会ワーキングドラフト（7月22日版）
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ