Webデザインでヘルプや問い合わせ先の場所をそろえる方法|どのページでも同じ順番に置く
問い合わせ先・よくある質問・チャットのような助けの手段を、どのページでも同じ順番の場所に置く方法を、アクセシビリティの基準WCAG 3.2.6をもとに解説します。ページごとに置き場所を変えたときの違いも、ブラウザで比べて紹介します。
目次
この記事でわかること
- ヘルプの場所について定めた、WCAGの達成基準3.2.6の内容
- 対象になる「助けの手段」の種類と、例外になる場合
- どのページでも同じ順番にヘルプを置く書き方
- ページごとに置き場所を変えた版と、ブラウザで比べた結果
申し込みの途中で分からないことがあったのに、問い合わせ先のリンクがページによって上にあったり下にあったりして、探すのに手間取ったことはありませんか。この記事では、よくある質問や問い合わせ先を、どのページでも同じ順番の場所に置く方法を、WCAG 2.2の達成基準3.2.6を軸に整理します。
拠り所にしたのは、W3Cの達成基準3.2.6の解説(Understanding)と技法G220で、どちらも2026年10月31日に原文に目を通しました。ブラウザで比べたページは、説明用にこしらえたものです。ツールやスクールを選んで勧めることはしません。
先に結論: 助けの手段は、共通の部品の中の同じ位置に置く
よくある質問や問い合わせ先を複数のページに置くなら、ほかの内容との順番がどのページでも同じになるようにします。 ページの型を1つにして、ヘッダーやフッターの決まった位置に置くのが確実です。
| 助けの手段の種類 | 例 |
|---|---|
| 人への連絡先 | 電話番号・メールアドレス・受付時間 |
| 人に連絡する仕組み | 問い合わせフォーム・チャット |
| 自分で調べる手段 | よくある質問・サポートのページ |
| 自動で答える仕組み | チャットボット |
ヘルプの場所に関わる基準(3.2.6)
WCAG 2.2の達成基準3.2.6(レベルA)は、ページに助けの手段があり、それが一連のページで繰り返されるなら、利用者が変化を起こした場合を除いて、ほかの内容に対して同じ順番に置くことを求めています。
解説では、この基準のねらいを、手続きを終えるための助けがあるときに、利用者がそれを見つけられるようにすることだとしています。たとえば、あるページでヘッダーにあるリンクは、ほかのページでもヘッダーにあると見つけやすくなります。
基準の注記では、助けの手段はページに直接置いても、その情報があるページへの直接のリンクでもよいとしています。
対象にならない場合と、例外
解説では、この基準は、作る人に助けの手段を用意すること自体を求めるものではないとしています。助けの手段がないページがあっても、違反にはなりません。フォームの説明文や入力の途中に出す補足のような、その場の説明も、この基準の助けの手段とは分けて考えます。
例外の「利用者が起こした変化」は、拡大の具合・画面の向き・表示の幅を変えるような操作を指します。解説では、ページを移動するだけの操作は、この例外に当たらないとしています。
書き方の例: 共通のフッターに「お困りのときは」を置く
次のHTMLは、どのページでも同じ型を使い、ヘッダー・本文・フッターの順に並べて、フッターの中によくある質問と問い合わせ先を置く例です。本文の中身だけをページごとに入れ替えます。
<!-- どのページにも同じ部品を、同じ順番で置く -->
<header>
<a href="/">サイトのトップ</a>
<nav aria-label="メイン">
<a href="/service/">サービス</a>
<a href="/price/">料金</a>
</nav>
</header>
<main>
<!-- ページごとの内容 -->
</main>
<footer>
<h2>お困りのときは</h2>
<ul>
<li><a href="/faq/">よくある質問</a></li>
<li><a href="/contact/">お問い合わせフォーム</a></li>
<li>電話の受付: 平日10時〜17時</li>
</ul>
</footer>
技法G220でも、ページの最初のほうやフッターのように、どのページでも同じ場所に問い合わせ先へのリンクを置く例が紹介されています。
手順: 自分のサイトのヘルプの場所を見直す
- 助けの手段を書き出す: 電話番号・問い合わせフォーム・よくある質問・チャットなど、ページに置いているものを一覧にします
- ページごとの位置を並べる: 主なページで、それぞれがヘッダー・本文・フッターのどこにあるかを表にします
- 順番がずれているページを探す: ほかのページと前後の関係が違うものに印を付けます
- 共通の部品にまとめる: ずれているページを、同じ型のヘッダーやフッターに置き換えます
- Tabキーでたどる: 主なページをキーボードでたどり、同じくらいの順番でヘルプに届くかを確かめます
試した結果
上のHTMLの型で、サービス・料金・申し込みフォームの3ページを作りました。これと、フォームのページだけ「お困りのときは」の部分を本文の前に動かした版を、手元のPCで立てた小さなサーバーに置き、ヘッドレスのChromeで読み込んで比べました。
- 型どおりの3ページでは、部品の並びがどれも「ヘッダー・本文・よくある質問・問い合わせ」の順でした
- 動かした版のフォームのページでは、並びが「ヘッダー・よくある質問・問い合わせ・本文」に変わりました。ほかの2ページは型どおりのままでした
- 型どおりの3ページでは、Tabキーでたどると、本文の中の部品を通った後によくある質問に届きました。動かした版のフォームのページでは、本文の入力欄より先に届きました
- 型どおりの3ページでは、問い合わせのリンクは画面で本文より下にあり、動かした版のフォームのページでは本文より上にありました
ブラウザは作業PC(Mac)に入っているGoogle Chrome 156を、画面を出さない形で動かしました。スクリーンリーダーでの読まれ方は試していません。
自分で直すか、相談するかの判断
目安は、「ヘルプを共通の部品に入れられるか」です。サイトのテンプレートでヘッダーやフッターを共通にしているなら、その中に置き直すだけでそろいます。
ページごとに別の担当者や別のツールで作っていて、共通の部品がない場合は、型を1つにするところから始まります。どの手段をどこに置くかは、問い合わせを受ける担当の人と相談して決めます。テンプレートの作り方を学びたいなら、Webデザインを学べる講座で見てもらう方法もあります。
つまずきやすいところ
- 申し込みのページだけ問い合わせ先を消す: 解説では、困りごとの例として、フォームを書き終えられないことを挙げています。助けが要りやすいページほど、同じ場所に残します
- メニューの並びもページで変える: ヘルプと同じく、メニューの並びもページ間でそろえます。そろえ方は、Webサイトのメニューの並びと部品の名前をページ間で統一する方法で紹介しています
- リンクの文言を「こちら」にする: 「お問い合わせはこちら」の「こちら」だけをリンクにすると、リンクの一覧で行き先が分かりません。文言の決め方は、Webデザインでリンクの文言を分かりやすくする方法にまとめています
- 入力エラーの説明をヘルプ任せにする: その場の説明は、入力欄の近くに文字で出します。伝え方は、Webデザインで入力エラーを分かりやすく伝える方法で紹介しています
まとめ
- 助けの手段を複数のページに置くなら、ほかの内容との順番をどのページでもそろえます
- ページの型を1つにして、ヘッダーやフッターの決まった位置に置くのが確実です
- 助けの手段がないページがあっても、それだけでは違反になりません
- 拡大や画面の向きを変えたときに並び方が変わるのは、例外として認められています
よくある質問
ヘルプを置いていないページがあると、基準を満たしませんか?
満たさないことにはなりません。解説では、助けの手段がないページがあっても、それだけでは違反にならないとしています。基準が求めているのは、助けの手段を複数のページに置くときに、同じ順番の場所にすることです。
スマホでは置き場所が変わってもよいですか?
画面の大きさや向き、拡大の具合で並び方が変わるのは、例外として認められています。基準の注記では、同じ拡大の具合と向きで表示したページどうしの順番を問題にするとしています。
問い合わせ先は、リンクだけでもよいですか?
かまいません。基準の注記では、助けの手段はページに直接置いても、その情報があるページへの直接のリンクでもよいとしています。
電話の受付時間が限られていても大丈夫ですか?
大丈夫です。解説では、人がいつでも対応できることまでは求めていないとしています。対応できない時間帯があるなら、いつ対応できるかを書いておくのが望ましいとされています。
ダウンロードしてもらうPDFにも、ヘルプを入れる必要がありますか?
必要はありません。解説では、Webページからダウンロードして見るPDFなどの文書は、この基準の対象のページの集まりに含めないとしています。