WCAG 2.2「2.4.1 繰り返しブロックのスキップ」Level Aの実装と確認方法

greeden

2年前

WCAG 2.2の達成基準2.4.1「繰り返しブロックのスキップ」は、複数のウェブページで繰り返されるコンテンツを飛ばせる仕組みを求めるLevel Aの基準です。
サイト共通のヘッダーやナビゲーションを毎回たどらず、主なコンテンツへ移動できるようにします。

この基準が主に支援するのは、Tabキーなどでページを順番に操作する人や、スクリーンリーダーで見出しやランドマークをたどる人です。
実装の形だけを整えるのではなく、利用者が実際に繰り返し部分を飛ばせるかどうかまで確認する必要があります。

「繰り返しブロックのスキップ」が求めること

繰り返しブロックとは、同じサイトなどの複数ページに共通して現れる、まとまりのあるコンテンツです。
代表例には、サイト共通のヘッダー、主要ナビゲーション、フッターがあります。

スキップの仕組みとは、そのブロックを一つずつ操作したり読み上げたりせず、次の主要な領域へ移動できる手段です。
同じ単語や一つのリンクが複数ページにあるだけでは、通常はここでいう「ブロック」には当たりません。

この仕組みがないと、キーボード利用者はページを移動するたびに同じリンク群へ何度もフォーカスを移すことになります。
スクリーンリーダー利用者も、主な内容へ着く前に同じ情報を繰り返し聞かなければなりません。

実装方法の選び方

達成基準は特定の実装を一つだけ指定していません。
ページの構造や利用環境に合わせ、次の方法を単独または組み合わせて使います。

方法	向いているページ	確認する点
主なコンテンツへのスキップリンク	主なコンテンツ領域が一つの一般的なページ	最初にフォーカスでき、作動後に主なコンテンツへ移動する
HTMLのランドマーク	ヘッダー、ナビゲーション、本文などの領域が明確なページ	領域を適切な要素で示し、同種の領域が複数ある場合は名前で区別する
折りたたみ可能な繰り返しブロック	共通メニューなどを利用者が開閉できるページ	閉じた内容が見た目だけでなく、読み上げ順とフォーカス順からも外れる

スキップリンクを実装する

スキップリンクは、ページの先頭付近から主なコンテンツへ直接移動するリンクです。
次の例では、リンク先とmain要素のidを一致させています。

<a class="skip-link" href="#main-content">主なコンテンツへスキップ</a>

<header>
  <nav aria-label="主要">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

<main id="main-content">
  <h1>ページタイトル</h1>
  <p>ここからページ固有の内容が始まります。</p>
</main>

リンクを常に表示する方法が分かりやすい一方、普段は画面外に置き、キーボードフォーカスを受けたときに表示する方法もあります。
後者を採用する場合は、display: noneやvisibility: hiddenでリンク自体を操作不能にしてはいけません。

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1rem;
  color: #fff;
  background: #000;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

実装後は、次の四点を一続きの操作として確認します。

ページ先頭からTabキーを押すと、スキップリンクが最初にフォーカスされる。
フォーカスされたリンクが画面上で確認でき、目的がリンク文言から分かる。
Enterキーで作動させると、表示位置と操作位置が主なコンテンツへ移る。
続けてTabキーを押すと、主なコンテンツ内の次の操作要素へ進む。

ブラウザ、テーマ、固定ヘッダーの実装によって動作が変わる場合があるため、コードだけを見て合格と判断せず、実際のページで操作します。

HTMLのランドマークで領域を示す

ランドマークは、ヘッダー、ナビゲーション、主なコンテンツ、フッターなど、ページの大きな領域を支援技術が識別できるようにした構造です。
スクリーンリーダーなどのランドマーク移動機能を使うと、利用者は共通ナビゲーションを飛ばしてmainへ移動できます。

HTMLでは、まずheader、nav、main、footerなど、目的に合う要素を使います。
これらの要素には対応する意味があるため、同じ意味のroleを重ねて書く必要はありません。

<header>
  <p>サイト名</p>
  <nav aria-label="主要">
    <!-- サイト共通のナビゲーション -->
  </nav>
</header>

<main id="main-content">
  <h1>ページタイトル</h1>
  <!-- ページ固有の内容 -->
</main>

<footer>
  <p>&copy; 会社名</p>
</footer>

同じページに複数のnav要素がある場合は、aria-label="主要"やaria-label="パンくず"のように役割を区別します。
意味のないdivで既存ページを改修する場合にはARIAのランドマークロールを使えますが、新規実装では適切なHTML要素を優先すると構造を読み取りやすくなります。

折りたたみメニューで繰り返し部分を外す

共通メニューを利用者が開閉できる設計も、繰り返し部分を飛ばす方法になり得ます。
ただし、単にメニューの高さを小さくするだけではなく、閉じた内容を読み上げ順とフォーカス順から外せることが条件です。

<button type="button"
        id="nav-toggle"
        aria-expanded="false"
        aria-controls="main-nav">
  ナビゲーションを開く
</button>

<nav id="main-nav" aria-label="主要" hidden>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

const button = document.getElementById('nav-toggle');
const navigation = document.getElementById('main-nav');

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';

  button.setAttribute('aria-expanded', String(!expanded));
  navigation.hidden = expanded;
  button.textContent = expanded
    ? 'ナビゲーションを開く'
    : 'ナビゲーションを閉じる';
});

aria-expandedはボタンが示す開閉状態、aria-controlsは操作対象との関係を伝えます。
表示状態を変える処理では、これらの値とhiddenの状態を必ず同期させます。

よくある失敗と直し方

スキップリンクにフォーカスできない

display: noneやvisibility: hiddenを指定すると、リンクはキーボード操作の対象から外れます。
常時表示するか、画面外に配置したリンクを:focusで見える位置へ戻します。

リンク先が存在しない

href="#main-content"と同じidがページ内にないと、リンクを作動させても主なコンテンツへ移動できません。
テンプレート変更後もリンク先が一意に存在するか確認します。

見た目だけが移動し、操作位置が残る

画面が本文までスクロールしても、次のTab操作が共通ナビゲーションへ戻るなら、繰り返し部分を十分に飛ばせていません。
作動後の表示位置だけでなく、次のフォーカス位置まで確かめます。

ランドマークの名前を区別していない

複数のナビゲーションをすべて同じ名前で示すと、利用者は目的の領域を選びにくくなります。
「主要」「パンくず」「フッターナビゲーション」のように、内容に合う名前を付けます。

折りたたみ状態を支援技術へ伝えていない

メニューの表示だけを切り替え、aria-expandedを更新しない実装では、見た目と読み上げられる状態が一致しません。
ボタンの状態、操作対象、表示状態を一つの処理で更新します。

公開前の確認手順

共通ヘッダーやナビゲーションを持つ代表的なページを複数選ぶ。
マウスを使わず、ページ先頭からTabキーでスキップリンクへ移動する。
リンクを作動させ、主なコンテンツへ移動した後のフォーカス順を確認する。
スキップリンクが通常時またはフォーカス時に見え、背景との区別もできることを確認する。
スクリーンリーダーのランドマーク一覧で、主要領域を識別して移動できるか確認する。
折りたたみメニューがある場合は、閉じた項目へフォーカスが入らず、読み上げ対象にも残らないことを確認する。
画面幅やテンプレートが異なるページでも同じ操作を繰り返す。

axeやWAVEなどの検査ツールは、構造上の問題を探す補助になります。
ただし、スキップリンクを作動させた後のフォーカス移動や、利用者が目的の領域へ到達できるかは、手動操作でも確認します。

関連する確認項目は、キーボード操作とフォーカス表示の整え方と、アクセシビリティテストの実践方法でも解説しています。

実装と確認の要点

ページ先頭から主なコンテンツへ移動できるスキップリンクを用意する。
HTMLの意味に沿ってランドマークを構成し、同種の領域は名前で区別する。
折りたたみ方式では、閉じた内容を読み上げ順とフォーカス順から外す。
実際のキーボード操作と支援技術で、繰り返し部分を飛ばせることを確かめる。

スキップリンクと適切なランドマークを併用すると、異なる操作方法に対応しやすくなります。
サイト共通のテンプレートへ組み込み、複数ページで同じように機能する状態を保ちます。

当社では、Webアクセシビリティ対応を支援するUUU ウェブアクセシビリティを提供しています。
サイト全体の確認や継続的な改善に取り組む際は、サービスの詳細をご覧ください。