Webサイトを制作する際、見た目や操作性に加えてアクセシビリティへの配慮は欠かせません。その中でも基本的な取り組みのひとつが スキップリンク です。この記事では「スキップリンクとは何か」「なぜ必要なのか」そして「実装方法」についてわかりやすく解説します。
この記事でわかること
- スキップリンクについて
- スキップリンクを実装する方法
スキップリンクとは？
スキップリンク（Skip Link）とは、ページの先頭に配置される「本文へスキップ」「メインコンテンツへ移動」などのリンクのことです。
通常、Webページの上部にはナビゲーションやロゴ、ヘッダー要素が並んでいます。
しかし、キーボード操作やスクリーンリーダーを使って操作するユーザーにとっては、毎回同じナビゲーションを読み上げたり、Tabキーで飛ばしたりするのは大変です。
そこでスキップリンクをページの先頭に設置することで、ページの主要コンテンツへ素早く移動できるようになります。
なぜスキップリンクが必要なのか？
スキップリンクを設置する必要がある理由は以下の通りです。
- アクセシビリティの向上
長いナビゲーションリンクを繰り返し呼んだり、移動する手間を省くことができるので、ユーザーは求める情報へすぐにアクセスすることが可能になります。 - 国際的な推奨
WCAG（Web Content Accessibility Guidelines）やJIS規格でも、スキップリンクの設置が推奨されています。
それでは実際にスキップリンクを実装する方法について見ていきましょう。
スキップリンクの実装方法
スキップリンクはTabキーやスクリーンリーダで読む際に最初に来てほしいので<body>要素のできるだけ先頭に近い場所に配置しましょう。
デモのCodePenは下記になります。先頭の位置でTabキーを押したら「メインコンテンツにスキップ」のテキストが表示され、そのままリンクをクリックするとメインコンテンツのお知らせ一覧のリンクにフォーカスが移るのを確認してみてください。
HTML
HTMLは次のようになります。
<body>
<a href="#main" class="c-skip-link">メインコンテンツにスキップ</a>
<header>
<!-- headerのnavリンク -->
</header>
<!-- スキップリンクで飛ぶ場所 -->
<main id="main">
</main>
</body>
ここではbody直下にスキップリンクを配置しています。これにより、スキップリンクが最初に表示され、Tabキーを押すとスキップリンクにフォーカスが移ります。
スキップリンクのリンクには、#mainというIDを指定し、スキップリンクで飛ばす場所にid="main"を指定しています。これにより、スキップリンクをクリックすると、<main>タグの部分にフォーカスが移ります。
続いてCSSを見ていきましょう。
CSS
.c-skip-link {
position: fixed;
top: 0.5rem;
left: 16px;
z-index: 1000;
padding: 1rem;
background: #fff;
border: 1px solid #000;
opacity: 0;
pointer-events: none;
}
.c-skip-link:focus {
opacity: 1;
pointer-events: auto;
}
スキップリンクは、position: fixed;で固定しています。最初は非表示にしておきたいのでopacity: 0にして隠しています。また、pointer-events: none;でクリックやタップができないようにしています。
スキップリンクを表示させるタイミングはTabキーが押されたときです。なので、:focus状態になったときにopacity: 1にして表示させ、pointer-events: auto;にしてクリックやタップが可能にします。
スキップリンクはスクリーンリーダーでも読めるようにしたいので、非表示にするためにdisplay: none;を使用するのは避けてください。
まとめ
スキップリンクについての説明や実装方法について解説しました。
実装する上でのポイントは、
- ページ先頭に配置する
- 普段は隠してフォーカス時に表示
となり、すぐに導入できます。
この記事が参考になれば幸いです。