2.4.1 ブロックスキップ

要件

ページ内に繰り返し出現するコンテンツ（例：ナビゲーション）を飛ばして、主たるコンテンツに直接移動できる手段を提供すること。

対象となる「繰り返しブロック」の例

繰り返し出現する要素	説明
グローバルナビゲーション（グロナビ）	全ページに共通表示されるメニュー
サイドバー	よくあるカテゴリーリンクなど
ヘッダー・ロゴ	毎ページ共通の上部領域
フッターリンク群	サイトマップ、著作権情報など

実装方法（代表例）

方法1：スキップリンク（skip link）

<a href="#main-content" class="skip-link">本文へスキップ</a>

<!-- ページ内の本文コンテンツ開始地点に id を設定 -->
<main id="main-content">
  <!-- 本文 -->
</main>

リンクは通常は非表示（position: absolute; left: -9999px; など）にし、キーボード操作（Tab）でフォーカスされた時だけ表示

方法2：ARIAランドマークを使用したナビゲーション

<nav role="navigation">ナビゲーション</nav>
<main role="main">本文</main>

※ARIAランドマークは支援技術でのスキップ支援には有効ですが、明示的なスキップリンクと併用が望ましいとされています。

具体例

NG例	OK例
ページ先頭からタブキーで30回押さないと本文に辿り着けない	「本文へスキップ」リンクを最初に配置し、1回で移動可能
目に見えないリンクがずっと非表示	フォーカス時にのみ可視化される設計で実装済み

利点

• キーボード利用者が快適に操作可能
• スクリーンリーダーユーザーが迷子にならない
• 共通UIでページ間移動の効率向上
• 情報設計の構造化・アクセシビリティ向上

まとめ

項目	内容
達成基準	2.4.1 ブロックスキップ（Bypass Blocks）
レベル	A
目的	繰り返し出現するブロックを飛ばして本文に移動可能にする
実装方法	スキップリンクの設置、ランドマークロールの活用など
推奨事項	最上部にキーボードフォーカスで表示される「本文へスキップ」リンクの設置
利点	支援技術利用者・キーボード操作ユーザーの利便性向上

特にWordPressやテンプレートベースのCMSを用いる場合、テンプレートにスキップリンクを初期実装することが推奨されます。

一覧に戻る