第32回 スキップリンクの実装テーブルレイアウトを卒業しよう

スキップリンクの実装

スキップリンクとは

スキップリンクとは、主にページ内先頭部分に配置されるページ内へのリンクのことを言います。スキップナビゲーションやナビゲーションスキップといった呼び方もあります。

ページ先頭にはサイト内リンク(いわゆるメニュー)があることが多いですが、スクリーンリーダー(音声ブラウザー)を使っている場合に、毎ページで共通のナビゲーションが読み上げられてしまうと煩雑になってしまいます。

そこで、サイト内リンクより前にページ内へのリンクを配置し、サイト内リンクが読み上げられる前にメインのコンテンツに移動できるようにする、というのがスキップリンクの主目的です。

JIS規格 X 8341-3:5.3 hでも

共通に使われるナビゲーションなどのためのハイパリンク及びメニューは,読み飛ばせるようにすることが望ましい。

とされています。

ただ、スクリーンリーダーのユーザーを対象として、視覚的に表示をしておく必要がない場合には、CSSを使うなどのテクニックで、「読み上げられるが表示しない」とするケースが多くあります。

スキップリンクのマークアップ

スキップリンクのマークアップは非常に様々な方法が考えられます。上記のJIS規格でも紹介されていますが、次のようなパターンがあります。

他にもさまざまなものが考えられますが、よく見かける手法は「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;
}

ただ、スキップリンクは、必ずしもスクリーンリーダーのユーザーだけに有用なものではないので、通常のマウス操作でも使えるように非表示にすべきではない、という意見や、そもそもページ内へのリンクの是非に関する議論もあります。

これが正解!とはここでは言い切れませんが、スクリーンリーダーのユーザー向けということであれば、アクセシビリティの向上に役立つのではないかと思います。

参考リンク

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSSのpositionに挑戦
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読