理解可能 / 3.2 予測可能

3.2.6一貫したヘルプ

レベル A2.2 新規

Consistent Help

問い合わせ先やヘルプへの導線を複数ページで提供する場合、各ページで同じ相対的な位置・順序に置く。

WCAG 2.2 で新しく追加された達成基準です

この基準は WCAG 2.1 にはなく、2.2 で新設されました。 まだ日本語の解説が少ない領域なので、下記のリンク先とあわせて理解を深めてください。

「一貫したヘルプ」がなぜ必要なの?

ウェブサービスを使っていて「操作の仕方が分からない」「問い合わせたい」と思ったとき、 あなたはヘルプボタンをどこに探しますか?「たぶんヘッダーの右端にあるはず」 という期待は、ページをまたいで ヘルプの場所が変わるたびに裏切られます。

この達成基準は、それを防ぐためのルールです。 複数のページにわたってヘルプ手段(問い合わせ先・チャット・FAQ リンクなど)を提供するなら、どのページでも同じ相対的な位置・順序に置くことを求めます。

特に次のようなユーザーに影響が大きいです:

  • 認知・学習障害のある人——毎回ヘルプを探し直す認知コストが大きい。
  • 記憶に困難がある人——「前のページではここにあった」という記憶を頼れない。
  • 初めてサイトを訪れる人——ナビゲーション構造をまだ把握していない段階で詰まりやすい。

補足

この基準は特定の UI コンポーネントではなく、サイト全体のレイアウト規約の話です。 「ヘルプへのリンクを作れ」ではなく、「提供しているなら場所を統一しろ」というルールです。 ヘルプを一切提供しないサイトにはこの基準は適用されません。

不合格の例(場所がバラバラ)

3 つのミニページを並べました。ヘルプ/お問い合わせリンクの位置に注目してください。

ヘルプの位置がページごとにバラバラ

トップページ

← ヘルプが右上

商品詳細ページ

お問い合わせ

↑ 本文の下に移動した

購入フローページ

ヘルプリンク自体が無い

ページごとにヘルプの場所が変わり、探さないと見つかりません。3枚目にはリンク自体がありません。

合格の例(毎ページ同じ位置)

同じ 3 ページですが、今度はすべてのページでヘルプリンクが右上の同じ位置に並んでいます。

どのページでも右上の同じ位置にヘルプがある

トップページ

↑ ヘルプが右上に固定

商品詳細ページ

↑ 同じ位置・同じ順序

購入フローページ

↑ 購入フロー内でも同じ

どのページでも右上の同じ位置にヘルプがあり、すぐ見つかります。

実装の考え方(コード)

最も確実な方法は、共通レイアウト(ヘッダーコンポーネント)にヘルプ導線を組み込むことです。 全ページが同じヘッダーを使えば、位置と順序は自然に統一されます。

良い例 / 推奨

共通 <header><nav> 末尾にヘルプ・問い合わせリンクを置き、 全ページで同一コンポーネントを使い回します。 ページ個別のテンプレートにヘルプを書かず、レイアウト側で管理するのが鉄則です。

<!-- ✓ 共通レイアウト(全ページに適用される) -->
<header class="site-header">
  <a href="/" class="site-logo">MyShop</a>
  <nav aria-label="グローバルナビゲーション">
    <a href="/products">商品一覧</a>
    <a href="/cart">カート</a>
    <!-- ヘルプ導線は nav の末尾に固定 -->
    <a href="/help">ヘルプ</a>
    <a href="/contact">お問い合わせ</a>
  </nav>
</header>

<!-- あとは各ページ固有のコンテンツ -->
<main>…</main>

悪い例 / 避ける

やりがちな失敗:ページごとに置き場所を変える / 一部ページで省く

  • トップページだけヘッダー右端にヘルプリンクがあり、商品詳細ページでは本文下部にある
  • 購入フローのページではヘルプリンク自体が省略されている
  • どこにあるか分からず、困ったときに探す手間が認知コストになる
  • 認知・学習障害のあるユーザーや、初めてサイトを訪れたユーザーが特に影響を受ける

ポイント

ユーザーが自分でヘルプの位置をカスタマイズした場合(ドラッグ移動できるウィジェットなど)は 例外として扱われます。ユーザー自身が変えた位置はサイト側が強制する必要はありません。 また、特定のページにのみヘルプが存在する場合もこの基準の適用外です(複数ページで提供するときが対象)。

何を「ヘルプ」と数える?

WCAG 2.2 が対象とする「ヘルプ手段」は次のいずれかです。サイトが提供しているものだけが対象であり、 すべてを用意する必要はありません。

  • 人的サポートへの連絡先——電話番号・メールアドレス・営業時間など
  • 人的サポートのメカニズム——ライブチャット・チャットボット・問い合わせフォームなど
  • 自己解決オプション——FAQ・ヘルプページ・サポート記事へのリンクなど
  • 完全に自動化された連絡先メカニズム——フォームに入力するとメールが届くシステム等

たとえば「FAQページへのリンク」だけを提供しているサイトなら、 そのリンクがすべてのページで同じ相対的な位置にあれば達成です。

チェックリスト

  • 提供しているヘルプ手段(問い合わせ・チャット・FAQ 等)を列挙した
  • それらはすべてのページで同じ相対的な位置に置かれている
  • 複数のヘルプ手段を並べる場合、順序もすべてのページで同一である
  • 共通ヘッダー・フッター・レイアウトコンポーネントでヘルプ導線を管理している(ページ個別に書いていない)
  • 購入フロー・登録フローなど「特殊なページ」でもヘルプが同じ位置にある、または意図的に省く場合は基準を確認した
  • ユーザーがカスタマイズした位置を上書きしていない

原典・規範文書