ページを開くたびに、ヘッダーやメニューのリンクを何度もTabキーでたどるのは負担になります。ブロックスキップは、こうした繰り返し部分を飛ばし、メインコンテンツへ直接移動できるようにする仕組みです。
よく使われる実装が、ページ先頭に置く「スキップリンク」です。この記事では、役割と実装方法に加え、見落としやすいフォーカス表示と動作確認のポイントまで整理します。
ブロックスキップとスキップリンクの違い
ブロックスキップは、複数ページで繰り返されるヘッダーやナビゲーションなどを迂回できるようにする考え方です。スキップリンクは、その考え方を実現する代表的な方法のひとつで、リンクを選ぶとページ内のメインコンテンツへ移動します。
アクセシビリティの国際的な指針であるWCAGの「ブロックスキップ」でも、繰り返されるコンテンツを飛ばすための仕組みが求められています。ただし、スキップリンクを置くだけでサイト全体のアクセシビリティ対応が完了するわけではありません。見出しやランドマークを適切に使い、ページ構造そのものも分かりやすくする必要があります。
どのような人の操作を助けるのか
ブロックスキップは、ページ内を上から順に移動する人の手間を減らします。主に次のような場面で役立ちます。
- キーボードだけで操作する人：メニュー内のリンクを一つずつ通過せず、少ない操作で本文へ移れます。
- スクリーンリーダーを利用する人：各ページで同じヘッダーやナビゲーションを繰り返し読み上げる時間を減らせます。
- 細かな操作を続けることが難しい人：必要なキー操作が減るため、ページを移動する際の身体的な負担を抑えられます。
たとえば、本文より前に20個のリンクがあるページでは、スキップリンクがなければ本文へ着くまでTabキーを何度も押さなければなりません。ページ先頭のスキップリンクを選べれば、その操作をまとめて省けます。
スキップリンクが動く流れ
- ページを開き、Tabキーで最初の操作対象へ移動します。
- 「メインコンテンツへスキップ」というリンクが画面に表示されます。
- Enterキーでリンクを選びます。
- 表示位置とキーボードフォーカスがメインコンテンツへ移ります。
- 次にTabキーを押すと、本文内のリンクやボタンへ進めます。
画面が本文までスクロールするだけでは不十分です。キーボードで操作を続けたときに、フォーカスも移動先から進むことを確認します。
HTMLの基本実装
スキップリンクをページの先頭に置き、リンク先とメインコンテンツのIDを一致させます。
<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>
<header>
<!-- サイト名など -->
</header>
<nav aria-label="メインナビゲーション">
<!-- ナビゲーション -->
</nav>
<main id="main-content" tabindex="-1">
<!-- ページの主な内容 -->
</main>href="#main-content"とid="main-content"が対応することで、リンクから本文へ移動できます。tabindex="-1"はmain要素を通常のTab移動順には加えず、移動先としてフォーカスを受け取れるようにする指定です。
同じIDをページ内で複数回使うと、意図した場所へ移動できない原因になります。対象のIDが一意であることも確認してください。
CSSでフォーカス時に表示する
スキップリンクは常に表示しても構いません。通常時だけ画面外へ置く場合は、フォーカスを受けたときに、位置とフォーカス枠の両方がはっきり見えるようにします。
.skip-link {
position: absolute;
top: 0;
left: 1rem;
z-index: 1000;
padding: 0.75rem 1rem;
color: #fff;
background: #000;
transform: translateY(-120%);
}
.skip-link:focus {
transform: translateY(0);
outline: 3px solid #ffd54f;
outline-offset: 2px;
}display: noneやvisibility: hiddenで隠すと、リンクがキーボードフォーカスを受けられません。また、outline: noneだけを指定すると現在位置が分からなくなるため、フォーカス表示は消さないでください。
実装時に確認したい6項目
| 確認項目 | 判断の目安 |
|---|---|
| 配置 | スキップリンクがページ内の最初の操作対象になっている |
| ラベル | 「メインコンテンツへスキップ」のように移動先が分かる |
| リンク先 | hrefと移動先のidが一致し、IDが重複していない |
| 可視性 | フォーカス時にリンク全体とフォーカス枠を確認できる |
| 移動後 | 表示位置だけでなく、キーボードフォーカスも本文へ移る |
| 共通性 | 同じサイトの各ページで、配置とラベルが一貫している |
キーボードで動作を確認する方法
実装後はコードを見るだけで終えず、実際の操作順を確かめます。
- ページを再読み込みし、Tabキーを押します。
- 最初にスキップリンクが表示されることを確認します。
- リンクの文字とフォーカス枠が背景から見分けられることを確認します。
- Enterキーを押し、メインコンテンツへ移動します。
- もう一度Tabキーを押し、本文内の操作対象へ順番に進めることを確認します。
- ヘッダー構成が異なるページでも同じ手順を試します。
フォーカスの設計をサイト全体で見直す場合は、キーボード操作とフォーカス表示の整え方もあわせて確認できます。
複数のスキップ先は必要か
多くのページでは、メインコンテンツへ移動するリンクを一つ用意すれば目的が明確になります。一方、独立した領域が多いポータル型のページなどでは、検索、ナビゲーション、本文といった複数の移動先が役立つ場合があります。
リンクを増やしすぎると、かえって最初の操作が複雑になります。ページの構成と利用場面に合わせ、よく使う移動先に絞り、各リンクのラベルを具体的にします。
まとめ
ブロックスキップは、繰り返されるヘッダーやナビゲーションを飛ばし、キーボード利用者やスクリーンリーダー利用者が本文へ移りやすくする仕組みです。ページ先頭のスキップリンク、対応する移動先、見えるフォーカス表示を一組として実装します。
最後に、TabキーとEnterキーで「リンクが見えるか」「本文へフォーカスが移るか」「そのまま操作を続けられるか」を確認してください。短いコードでも、動作確認まで行って初めて利用者の負担軽減につながります。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ向上に取り組む際は、サービスの詳細もご覧ください。