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>関連ページへのリンクを設ける
本文やサイドバーの関連リンクは、現在の内容との関係を手掛かりに別のページを見つける方法になります。
「こちら」のような曖昧な文言を避け、移動先が分かるリンク名にします。
<aside>
<h3>関連ページ</h3>
<ul>
<li><a href="/products">製品一覧</a></li>
<li><a href="/services">サービス概要</a></li>
<li><a href="/faq">よくある質問</a></li>
</ul>
</aside>方法をどう組み合わせるか
各方法を設置しただけではなく、同じ対象ページを実際に二つ以上の方法で見つけられることが判断の基準です。
| 一つ目の方法 | 二つ目の方法 | 確認例 |
|---|---|---|
| 主要メニュー | サイト内検索 | メニューと検索結果の両方から会社概要へ移動する |
| 主要メニュー | サイトマップ | メニューとサイトマップの両方から製品一覧へ移動する |
| 関連ページへのリンク | サイト内検索 | 関連リンクと検索結果の両方からよくある質問へ移動する |
よくある失敗と直し方
主要メニューだけに依存している
主要メニューしかない場合は、検索やサイトマップなど、異なる探し方を追加します。
サイトマップの構造が古い
ページの追加や移動にサイトマップが追随していないと、別の手段として正しく機能しません。
公開中のページとリンク先を照合し、階層も現在のサイト構造に合わせます。
検索フォームを置いただけで確認を終える
検索結果に目的のページが出なければ、そのページを見つける手段にはなりません。
ページ名だけでなく、利用者が入力しそうな内容の語でも結果を確認します。
自動検査だけで達成を判断する
AxeやWAVEは個々の要素やHTMLの問題を調べる補助に使えますが、同じページを複数の手段で見つけられるかは手動でも確認します。
確認手順
- 対象となるページ群の範囲を決めます。
- 購入手続きの途中や検索結果など、プロセス固有のページを分けます。
- 通常ページごとに、見つける方法を二つ以上書き出します。
- 各方法を実際に操作し、リンク切れや検索漏れがないか確かめます。
- キーボード操作やスクリーンリーダーの仕組みと実装ポイントも踏まえ、各方法を利用できるか確認します。
- ページ追加や構成変更の後も同じ確認を繰り返します。
確認結果は、対象ページ、一つ目の方法、二つ目の方法、判定を表にすると見直しやすくなります。
| 対象ページ | 一つ目の方法 | 二つ目の方法 | 結果 |
|---|---|---|---|
| 会社概要 | 主要メニュー | サイト内検索 | 両方から移動できる |
| 製品一覧 | 主要メニュー | サイトマップ | 両方から移動できる |
継続的な点検の組み立て方は、公開後のWebアクセシビリティ試験と改善の進め方でも解説しています。
複数の方法を用意する効果
- メニューの分類が分かりにくい利用者は、検索から目的のページを探せます。
- サイト全体を見渡したい利用者は、サイトマップから構造を確認できます。
- 現在のページとの関係から探したい利用者は、関連リンクを使えます。
- 一つの方法を使いにくい利用者にも、別の選択肢を残せます。
実装時のチェックリスト
- 通常ページを見つける方法が二つ以上ある。
- 適用除外にしたページが、プロセスの結果または途中に該当している。
- 主要メニューとサイトマップのリンク先が現在の構成に合っている。
- サイト内検索で対象ページを実際に見つけられる。
- 関連リンクの文言から移動先を判断できる。
- 自動検査の結果だけでなく、複数の経路を手動で確認している。
実装判断の要点
「2.4.5 複数の方法」への対応では、機能の数ではなく、利用者が同じページを異なる方法で見つけられるかを確認します。
主要メニュー、サイトマップ、サイト内検索、関連リンクをサイトの規模と構成に合わせて組み合わせ、変更後も移動経路を点検してください。
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
自社サイトの確認や改善に関心がある方は、サービスの詳細をご覧ください。