ブロックスキップは、ページの先頭にある共通メニューなどを飛ばし、本文へ直接移動できるナビゲーション機能です。
キーボードで最初にスキップリンクへフォーカスし、Enterキーを押すだけでメインコンテンツへ移動できるため、同じリンクを何度もたどる負担を減らせます。
ブロックスキップ（スキップリンク）とは
Webサイトには、ヘッダー、メニュー、検索欄など、複数のページで繰り返し表示される領域があります。
マウスを使う人は本文を直接選べますが、Tabキーで順番に移動する人は、本文より前にあるリンクやボタンを一つずつ通過しなければなりません。
そこで、ページ内リンクを使って繰り返し領域を迂回できるようにします。
このリンクをスキップリンクと呼び、その仕組み全体をブロックスキップと呼びます。
Web Content Accessibility Guidelines（WCAG）でも、複数のページで繰り返されるコンテンツを迂回する手段が求められています。
どの利用者の負担を減らすのか
- キーボードで操作する人：ヘッダー内のリンクを何度もTabキーで移動せず、本文へ進めます。
- スクリーンリーダーを使う人：ページを開くたびに共通メニューを最初から読み上げる必要がなくなります。
- マウス操作が難しい人：少ないキー操作で目的の領域へ移動できるため、操作の負担を抑えられます。
スキップリンクは特定の利用者だけに向けた特別な操作ではなく、ページを順番に移動する人が本文へ到達しやすくするための近道です。
HTMLでスキップリンクを実装する
基本構成は、ページの先頭に置くリンクと、その移動先となるメインコンテンツの組み合わせです。
<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>
<header>
<!-- ヘッダーの内容 -->
</header>
<nav>
<!-- ナビゲーション -->
</nav>
<main id="main-content" tabindex="-1">
<!-- メインコンテンツ -->
</main>href="#main-content"とid="main-content"を一致させることで、リンクを実行したときに本文の先頭へ移動します。
tabindex="-1"は、移動先を通常の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(-150%);
}
.skip-link:focus {
transform: translateY(0);
outline: 3px solid #ffbf47;
outline-offset: 2px;
}この例では、通常時はリンクを画面の上側へ移動し、フォーカス時に表示位置へ戻します。
フォーカスの輪郭を消すと、キーボード利用者が現在位置を判断しにくくなるため、輪郭は残します。
フォーカス表示全体の考え方は、キーボード操作とフォーカス表示を整える方法でも解説しています。
リンク名とスキップ先を決める
移動先が伝わるラベルを付ける
リンク名には「ここをクリック」のような曖昧な言葉を使わず、「メインコンテンツへスキップ」のように移動先を示します。
リンクだけを読み上げても目的が伝わるため、実行する前に移動先を判断できます。
スキップ先を増やしすぎない
一般的なページでは、メインコンテンツへのリンクが一つあれば、ヘッダーやメニューをまとめて迂回できます。
一方、検索結果の前に長い絞り込み領域があるなど、独立した領域を順番に通過する構成では、必要に応じてスキップ先を追加します。
その場合も、「検索結果へスキップ」のように、各リンクと移動先の対応がわかる名前を付けます。
キーボードで確認する手順
コードを追加しただけで完了とせず、実際のページで次の順に操作します。
- ページを開き、Tabキーを一度押す。
- スキップリンクが見える位置に表示され、リンク名を読めることを確認する。
- Enterキーを押し、メインコンテンツへ表示とフォーカスが移ることを確認する。
- もう一度Tabキーを押し、メインコンテンツ内の次のリンクやボタンへ進めることを確認する。
- 同じテンプレートを使う別ページでも、リンク先のIDと動作を確認する。
表示だけが本文へ移り、キーボードフォーカスがヘッダーに残る状態では、次のTab操作でヘッダーへ戻ってしまいます。
見た目の移動とフォーカスの移動を、セットで確認します。
実装時の確認ポイント
- スキップリンクをページ内で最初にフォーカスできる位置へ置く。
- リンク名で移動先を具体的に示す。
- フォーカス時にリンクを見える状態にする。
- リンク先のIDを一致させ、移動後のフォーカスも確認する。
- 複数のスキップ先は、ページ構成上の必要がある場合に限って追加する。
ブロックスキップは短いHTMLとCSSで実装できますが、使いやすさはフォーカスの動きまで確認して初めて判断できます。
まずは主要なページテンプレートに「メインコンテンツへスキップ」を設け、キーボードだけで一連の操作を試してください。
当社では、Webアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットを提供しています。
関連機能の一例は、UUU ウェブアクセシビリティウィジェットの翻訳機能で紹介しています。