WCAG 2.2「2.4.5 複数の方法」とは？Level AAの要件、実装例、確認手順

greeden

2年前

WCAG 2.2の「2.4.5 複数の方法」は、同じページを見つける手段を二つ以上用意することを求めるLevel AAの達成基準です。

利用者が一つのナビゲーション方法に依存せず、自分に合う手掛かりから目的のページを探せる状態を目指します。

WCAG 2.2の全体像と達成基準の考え方を先に確認すると、この基準の位置付けをつかみやすくなります。

「複数の方法」が求める状態

複数の方法とは、ページ群の中にある同じページを、異なる手掛かりから見つけられる状態です。

たとえば、主要メニューから「会社概要」へ移動でき、サイト内検索でも同じページを見つけられるなら、二つの方法があります。

対象：ウェブサイトなど、ひとまとまりのページ群に含まれるページです。
要件：対象ページを見つける方法を二つ以上用意します。
適用除外：購入手続きの途中や検索結果など、プロセスの結果または一部として表示されるページです。

主要メニュー、サイトマップ、サイト内検索、関連ページへのリンクは、それぞれページを見つけるための一つの方法になります。

ページを見つける方法と役割
方法	利用者の手掛かり	確認する点
主要メニュー	分類やページ名をたどる	目的のページへ実際に移動できるか
サイトマップ	サイト全体の構造から探す	掲載ページとリンク先が現在の構成に合っているか
サイト内検索	キーワードで探す	想定する語で目的のページが結果に表示されるか
関連ページへのリンク	読んでいる内容との関係から探す	リンク文から移動先を判断できるか

適用されないページ

プロセスの結果または途中にだけ現れるページは、この基準の対象外です。

購入確認ページは購入手続きを進めた結果として表示され、検索結果ページは入力した検索語に応じて生成されます。

ただし、サイト内の通常ページまで一括して除外されるわけではないため、対象ページとプロセス固有のページを分けて確認します。

実装方法

主要メニューを用意する

主要メニューは、サイトの主な分類やページへ移動するための手段です。

メニューがあるだけで全ページに複数の方法を提供したことにはならないため、検索やサイトマップなどと組み合わせます。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/products">製品一覧</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

サイトマップで構造を示す

サイトマップは、ページを一覧し、階層関係から目的のページを探せるようにします。

子階層のリストは、対応する親項目の中に入れてHTMLの関係を正しく表します。

<h2>サイトマップ</h2>
<ul>
  <li><a href="/">ホーム</a></li>
  <li><a href="/about">会社概要</a></li>
  <li>
    <a href="/products">製品一覧</a>
    <ul>
      <li><a href="/products/product1">製品1</a></li>
      <li><a href="/products/product2">製品2</a></li>
    </ul>
  </li>
  <li><a href="/contact">お問い合わせ</a></li>
</ul>

サイト内検索を提供する

サイト内検索は、利用者がページ名や内容に関係するキーワードから目的のページを探す手段です。

検索フォームを置くだけでなく、想定するキーワードで対象ページが結果に表示されるところまで確認します。

<form action="/search" method="get">
  <label for="site-search">サイト内検索</label>
  <input type="text" id="site-search" name="q">
  <button type="submit">検索</button>
</form>

方法をどう組み合わせるか

各方法を設置しただけではなく、同じ対象ページを実際に二つ以上の方法で見つけられることが判断の基準です。

組み合わせの例
一つ目の方法	二つ目の方法	確認例
主要メニュー	サイト内検索	メニューと検索結果の両方から会社概要へ移動する
主要メニュー	サイトマップ	メニューとサイトマップの両方から製品一覧へ移動する
関連ページへのリンク	サイト内検索	関連リンクと検索結果の両方からよくある質問へ移動する

よくある失敗と直し方

主要メニューだけに依存している

主要メニューしかない場合は、検索やサイトマップなど、異なる探し方を追加します。

サイトマップの構造が古い

ページの追加や移動にサイトマップが追随していないと、別の手段として正しく機能しません。

公開中のページとリンク先を照合し、階層も現在のサイト構造に合わせます。

検索フォームを置いただけで確認を終える

検索結果に目的のページが出なければ、そのページを見つける手段にはなりません。

ページ名だけでなく、利用者が入力しそうな内容の語でも結果を確認します。

自動検査だけで達成を判断する

AxeやWAVEは個々の要素やHTMLの問題を調べる補助に使えますが、同じページを複数の手段で見つけられるかは手動でも確認します。

確認手順

対象となるページ群の範囲を決めます。
購入手続きの途中や検索結果など、プロセス固有のページを分けます。
通常ページごとに、見つける方法を二つ以上書き出します。
各方法を実際に操作し、リンク切れや検索漏れがないか確かめます。
キーボード操作やスクリーンリーダーの仕組みと実装ポイントも踏まえ、各方法を利用できるか確認します。
ページ追加や構成変更の後も同じ確認を繰り返します。

確認結果は、対象ページ、一つ目の方法、二つ目の方法、判定を表にすると見直しやすくなります。

確認結果の記録例
対象ページ	一つ目の方法	二つ目の方法	結果
会社概要	主要メニュー	サイト内検索	両方から移動できる
製品一覧	主要メニュー	サイトマップ	両方から移動できる

継続的な点検の組み立て方は、公開後のWebアクセシビリティ試験と改善の進め方でも解説しています。

複数の方法を用意する効果

メニューの分類が分かりにくい利用者は、検索から目的のページを探せます。
サイト全体を見渡したい利用者は、サイトマップから構造を確認できます。
現在のページとの関係から探したい利用者は、関連リンクを使えます。
一つの方法を使いにくい利用者にも、別の選択肢を残せます。

実装時のチェックリスト

通常ページを見つける方法が二つ以上ある。
適用除外にしたページが、プロセスの結果または途中に該当している。
主要メニューとサイトマップのリンク先が現在の構成に合っている。
サイト内検索で対象ページを実際に見つけられる。
関連リンクの文言から移動先を判断できる。
自動検査の結果だけでなく、複数の経路を手動で確認している。

実装判断の要点

「2.4.5 複数の方法」への対応では、機能の数ではなく、利用者が同じページを異なる方法で見つけられるかを確認します。

主要メニュー、サイトマップ、サイト内検索、関連リンクをサイトの規模と構成に合わせて組み合わせ、変更後も移動経路を点検してください。

当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。

自社サイトの確認や改善に関心がある方は、サービスの詳細をご覧ください。