LEARN BY EXAMPLE
3.3.5 ヘルプ レベル AAA
いま入力している内容に合った説明を、その場で確かめられるようにする。
概要
いま行っている入力や操作に関係する、コンテキストに応じたヘルプを利用できるようにします。利用者が何をすればよいかを、作業している場所を見失わずに確かめられるようにします。
質問のすぐ近くで、書き方を確認する
PCやスマートフォンで講座を申し込み、「受講の目的」に何を書くかを考える場面です。
利用者が困る例 項目名だけで、書き方を調べられない
どんな内容を書けばよいか分からない。
FAQにもこの質問の説明がなく、文章を書き始められません。
改善した例 質問に合う説明と記入例がある
講座サイト|写真入門の申し込み
書き方に迷ったら、この欄のヘルプを開いてください。
「受講の目的」の書き方
現在の撮影経験と、この講座でできるようになりたいことを短く書きます。未経験なら「初めて」と書いて構いません。
記入例
撮影は初めてです。スマートフォンで、料理を明るく撮る方法を知りたいです。
目的を絞れていない場合は、今困っていることを一つ書いてください。
架空の内容で試してください。この図では送信しません。
書き方を確かめ、同じ入力欄で続けられる。
ヘルプを開閉しても文章は残り、必要なときに説明を読み直せます。
達成できないと起こる問題の例
文章を書くことが難しい人が、PCやスマートフォンで講座を申し込んでいます。「受講の目的」という必須の欄には項目名と文字数の上限がありますが、どのような内容を書けばよいか分かりません。
サイト全体のFAQには申し込みの流れや支払方法しかなく、この欄の書き方を調べられません。利用者は書き始められず、申し込みを進めにくくなります。
達成するための改善例
同じ入力欄のすぐ近くに、「『受講の目的』の書き方」というヘルプを置きます。開くと、現在の経験と学びたいことを書けばよいことや、未経験の場合の書き方、具体的な記入例を読めます。
利用者は質問の意味と書き方を確かめ、元の入力欄で文章を書き続けられます。ヘルプを閉じても入力内容は残り、書いていた内容を思い出して入れ直す必要がありません。
図の改善側では、ヘルプを開閉しながら、練習用の文章を入力できます。入力内容は送信しません。
確認のポイント
- 利用者が迷う入力や操作について、その機能に合った説明を利用できますか。
- ヘルプがあることと、どの入力・操作の説明かを見つけられますか。
- ラベルだけでは足りない情報や、必要な形式・記入例を、その場で確認できますか。
- サイト全体のFAQだけで、現在の質問や操作の説明を探せない状態になっていませんか。
- キーボードやタッチでも必要なヘルプを使え、入力途中の内容を保って戻れますか。
条件と補足
いま実行している機能に合うヘルプ
コンテキストに応じたヘルプは、そのとき実行している機能に関する情報を提供する説明です。例えば、質問ごとの意味や書き方、決まった入力形式の説明、具体的な記入例などがあります。
FAQや別のヘルプページを使う方法もあります。その場合も、現在のページや操作に合う説明へたどり着けることを確認します。どの場面でも同じ一般的な説明があるだけでは、必要な疑問を解決できないことがあります。
ラベルと追加の説明
明解なラベルが、そのままヘルプとして機能する場合もあります。公式解説は、ラベルだけではすべての機能を十分に説明できない場合に、補足のヘルプが必要だと説明しています。
どの欄にも長い説明や専用のヘルプボタンを置く、という要件ではありません。何を入力するかが十分に分かる欄と、質問の意図や書き方を補う必要がある欄を見分けます。
必要なときに見つけて使えること
ヘルプの存在が分かり、必要なときに利用できるようにします。入力欄の前後に関連するヘルプを置く方法や、フォームの冒頭で必要な入力方法を説明する方法があります。制作者が文章を用意するほか、技術に応じた情報を使ってブラウザーなどが提供する方法もあります。
図では同じページ内で説明を開き、入力した文章と入力欄を残します。別ページのヘルプへ進む場合も、利用者が元の作業へ戻れることを確認します。
関連する基準との違い
3.3.2「ラベル又は説明」は、入力に必要なラベルや説明の提供を扱います。3.3.5は、そのときの機能に合ったヘルプを扱います。一つの説明が、入力方法の案内とヘルプの両方に役立つ場合もあります。
3.2.6「一貫したヘルプ」は、複数のページで繰り返すヘルプの相対的な順序を扱います。配置の一貫性と、現在の作業に合う説明があることは、別に確認します。
参照資料
- WCAG 2.2 本体:3.3.5 Help(要件)
- WAIC:3.3.5 ヘルプの解説
- W3C:Understanding Help(英語公開版)
- W3C:G71 現在のページや入力に合うヘルプを提供する方法
- W3C:G184 フォームや入力欄のまとまりの前に説明を置く方法
テクニックは方法の例です。出典の最終確認: 2026-11-10。講座サイトと記入例は、この教材のために作った架空の例です。