2009年12月02日

スキップリンクの実装:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

スキップリンクの実装


スキップリンクとは


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

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

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

JIS規格 X 8341-3:5.3 hでも
共通に使われるナビゲーションなどのためのハイパリンク及びメニューは,読み飛ばせるようにすることが望ましい。
とされています。

ただ、スクリーンリーダーのユーザーを対象として、視覚的に表示をしておく必要がない場合には、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;
}

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

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

参考リンク


では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 15:10
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック