状況依存ヘルプとは、フォーム入力や画面操作を進めているユーザーに、その場で必要な説明を届ける仕組みです。
入力欄の条件、エラーの直し方、操作の補足を対象の近くに示すと、ユーザーは別のページを探さずに次の行動を判断できます。
高齢者や障害のあるユーザーだけを対象とする機能ではなく、初めてサイトを使う人や複雑な手続きを進める人にも役立ちます。
状況依存ヘルプが担う役割
一般的なFAQがサイト全体の疑問に答えるのに対し、状況依存ヘルプは「いま操作している項目」に結び付いた情報を示します。
たとえばパスワード欄では入力条件を事前に示し、メールアドレス欄では検証後に問題点と修正方法を伝えます。
| ヘルプの種類 | 表示する内容 | 適した場面 |
|---|---|---|
| 入力前の説明 | 文字数や入力形式などの条件 | 入力条件を先に知る必要があるとき |
| エラーメッセージ | 問題のある項目と直し方 | 入力内容を検証して問題が見つかったとき |
| 詳細ヘルプ | 短い説明だけでは足りない操作手順 | 複雑なフォームや設定画面を扱うとき |
適切な説明がない画面では、入力条件の推測や操作のやり直しが増え、問い合わせや途中離脱につながる可能性があります。
フォームの入力条件を常に見える形で示す
短い入力条件は、入力欄の近くに最初から表示すると見つけやすくなります。
aria-describedbyを使うと、入力欄と補足説明の関係を支援技術へ伝えられます。
<label for='password'>パスワード</label>
<p id='password-help'>8文字以上で、英字と数字を含めてください。</p>
<input
type='password'
id='password'
aria-describedby='password-help'
>ラベルと補足説明の役割や使い分けは、フォームのラベルと説明を正しく実装する方法でも確認できます。
ツールチップを唯一の説明にしない
ツールチップは、対象にポインターを重ねたときやキーボードでフォーカスしたときに現れる短い補足です。
マウスオーバーだけで表示する設計では、キーボードやタッチ操作で説明にたどり着けない場合があります。
入力に欠かせない条件は常に表示し、ツールチップを使う場合も複数の操作方法で開けるかを確認します。
表示と非表示の挙動を含む設計は、アクセシビリティに配慮したツールチップ設計を参照してください。
エラーは問題点と直し方を伝える
「入力に誤りがあります」だけでは、ユーザーはどこをどう直せばよいか判断できません。
対象の入力欄を特定し、「入力できる形式」と「入力例」を簡潔に示します。
次の例は、検証でエラーが見つかった後の状態です。
<label for='email'>メールアドレス</label>
<p id='email-help'>例：user@example.com</p>
<input
type='email'
id='email'
aria-describedby='email-help email-error'
aria-invalid='true'
>
<p id='email-error' role='alert'>
「@」を含むメールアドレスを入力してください。
</p>エラーがない初期状態ではエラーメッセージを表示せず、検証後に必要な内容を追加します。
入力中の一文字ごとに通知すると修正しにくくなることがあるため、検証するタイミングも実際の操作で確認します。
role='alert'などの通知方法は、ステータスメッセージの実装方法で使い分けを確認できます。
複雑な説明にはヘルプボタンを用意する
短い補足で足りない場合は、説明を開くためのボタンを入力欄や操作対象の近くに置きます。
<button type='button' aria-haspopup='dialog'>
パスワード条件の詳しい説明
</button>ボタン名には「ヘルプ」だけでなく、何の説明を開くのかを含めます。
説明をダイアログで表示する場合は、キーボードで開閉できるか、閉じた後に元の操作へ戻れるか、読み上げ順が分かりやすいかを確認します。
実装後に確認する項目
- ヘルプの文だけで、入力条件や次の操作を理解できるか
- 説明が対象の入力欄やボタンの近くにあるか
- マウス、キーボード、タッチ操作のいずれでも必要な説明を利用できるか
- 入力欄と説明が
aria-describedbyなどで適切に関連付けられているか - エラーメッセージが問題点と修正方法を具体的に示しているか
- 画面拡大時やスクリーンリーダー使用時にも情報の順序が分かるか
状況依存ヘルプは、説明を増やすだけの仕組みではありません。
ユーザーが判断を必要とする場所に、必要な情報を短く、見つけやすく、操作方法を問わず届ける設計です。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上に関心がある方は、サービスの詳細をご覧ください。