LEARN BY EXAMPLE

2.4.1 ブロックスキップ レベル A

繰り返すメニューを飛ばして本文へ進めるようにする。

概要

複数のページで繰り返されるメニューやヘッダーなどのまとまりを飛ばせる手段を用意します。同じ内容を毎回たどらずに、そのページの本文へ進めるようにします。

毎回のメニューを飛ばして本文へ

同じメニューが講座の各ページにある場面です。図のリンクはこの図の中へ移動します。

利用者が困る例 本文までメニューを順に通る

別の講座でもメニューから順番に。
本文へ直接進めない例を示す静止図です。

改善した例 本文へ直接進める

本文へ進む

市民センターの講座

写真教室

講座一覧:写真教室を開催します。

会場:第2教室

申込方法

受付窓口で申し込めます。

問い合わせ:受付窓口

メニューを飛ばし、本文の操作へ。
「本文へ進む」をEnterキーで実行し、次にTabキーを押すと「申込方法」へ進めます。

図:同じメニューを通って本文へ進む例と、本文へ直接進むリンクがある例。「改善した例」は移動と「申込方法」の開閉を試せます。講座への申込みは行いません。

達成できないと起こる問題の例

キーボードで講座のページを読んでいます。各ページの本文より前に同じメニューが並び、本文へ直接進む手段がありません。

別の講座を開くたびに、メニューのリンクを一つずつ通る必要があります。スクリーンリーダーで順番に読む人も繰り返す案内を聞いてから本文へ進むことになります。

達成するための改善例

同じ画面の先頭に「本文へ進む」リンクを用意します。リンクを選ぶとメニューを飛ばして本文の先頭へ移動し、続けて本文内の操作を使えます。

図の「改善した例」ではリンクへTabキーで移動してEnterキーを押すと、写真教室の本文へ進めます。もう一度Tabキーを押すと「申込方法」を開く操作へ進みます。

確認のポイント

  • 複数のページで繰り返されるメニュー、ヘッダー、広告などのまとまりを確認しましたか。
  • そのまとまりを飛ばすリンクや、支援技術で移動できる構造がありますか。
  • スキップリンクはキーボードで見つけて実行できますか。
  • 実行後は表示だけでなくフォーカスも移り、その先の内容を読み、操作できますか。

条件と補足

繰り返されるまとまりが対象

この基準は関連する複数のページで繰り返す内容のまとまりを扱います。個々の単語や単独のリンクなど、小さな繰り返しをすべて対象にするわけではありません。1ページだけにある繰り返しを飛ばせるようにすることも有用ですが、この基準による必須要件とは分けます。

スキップリンクは達成方法の一例

スキップリンクのほか、適切な見出しや、本文などの領域を示す構造を使う方法もあります。HTMLのmain要素は本文の領域を示し、対応する支援技術で移動する手がかりになります。

main要素を書くだけで、すべての利用環境でTabキーによる読み飛ばしができるわけではありません。採用する手段が想定するブラウザーや支援技術で利用できるか確認します。図では支援技術の領域移動とは別に、通常のキーボード操作でも使えるリンクを示しています。

スキップリンクは常に表示しても、フォーカスがある間に表示しても構いません。移動先や見出しを適切に設定し、メニューそのものを本文として示さないようにします。

関連する基準

1.3.1「情報及び関係性」は見出しや領域などの構造、2.4.3「フォーカス順序」は順に操作するときの意味と操作性、2.4.7「フォーカスの可視化」は操作中の位置が見えるかを扱います。飛ばす手段の有無と併せて確認します。

この改善例で扱うのは、繰り返すメニューを飛ばす操作です。ページやサイト全体のWCAG適合を示すものではありません。

参照資料

出典の最終確認: 2026-11-09。