WCAG 2.2 ガイドライン「3.3.5 ヘルプ」Level AAA について
はじめに
WCAG 2.2の「3.3.5 ヘルプ」は、ユーザーがコンテンツを操作する際に、コンテキストに応じたヘルプを提供することを求めています。この基準は、フォームやインターフェイスでの入力が複雑な場合に、ユーザーが必要な支援を簡単に得られるようにするために設けられています。
1. 基準の概要
要件
- ユーザーが状況に応じたヘルプを利用できるようにする。
- ヘルプは、操作を補助するリンク、例示、説明などの形で提供する。
対象となる場面
- フォームの入力フィールド
- 特定の形式やルールが必要な入力
- ユーザーが手順を理解する必要がある操作
2. 実装方法
a. ページ全体で利用可能なヘルプリンクを提供
すべてのページでヘルプリンクを提供し、ユーザーがいつでもサポートを受けられるようにします。
例: ヘルプリンク
<a href="/help" title="ヘルプページはこちら">ヘルプ</a>
b. 入力時にコンテキストに応じたヘルプを表示
フォーム入力フィールドに必要な情報や例を提供します。
例: 必要な入力形式を説明
<form>
<label for="phone">電話番号 (例: 090-1234-5678):</label>
<input type="text" id="phone" name="phone" placeholder="090-1234-5678">
<small>例: ハイフンを含む形式で入力してください。</small>
</form>
c. 入力補助機能を実装
スペルチェックや入力候補を提供して、ユーザーが正確にデータを入力できるようにします。
例: スペルチェックと入力候補
<form>
<label for="search">検索:</label>
<input type="text" id="search" name="search" autocomplete="on" spellcheck="true" placeholder="検索語句を入力">
</form>
d. フォームの冒頭に説明を追加
複数のフィールドが関連する場合、フォームの冒頭に具体的な説明を提供します。
例: フォームの指示を追加
<form>
<p>以下の情報を入力してください。必須項目は「*」で示されています。</p>
<label for="name">名前*:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
</form>
e. アシスタントを提供
リアルタイムでヘルプを提供するウィジェットやチャットボットを導入します。
例: チャットボットの埋め込み
<div id="chatbot">
<p>お困りの場合はこちらで質問してください。</p>
<button>チャットを開始</button>
</div>
3. アクセシビリティのメリット
a. ユーザーエラーの削減
- ヘルプがあることで、入力ミスを減らし、ユーザーの混乱を防ぎます。
b. スムーズな操作を実現
- 必要な情報が適切に提供されるため、操作が簡単になります。
c. ユーザー満足度の向上
- サポート体制が整っていることで、ユーザーは信頼感を持ちます。
4. よくある失敗例とその改善策
a. ヘルプが提供されていない
失敗例
- ユーザーが何を入力すればよいか分からない。
改善策
- 必要な形式や例を明示するヘルプを追加します。
<small>例: メールアドレス形式で入力してください (例: example@example.com)</small>
b. ヘルプが不明確
失敗例
- ヘルプが専門用語ばかりでわかりにくい。
改善策
- 平易な言葉で説明し、具体的な例を示します。
<small>例: 「1990-01-01」の形式で入力してください。</small>
5. テスト方法
a. 手動テスト
- フォームや操作を試し、ヘルプが適切に提供されているか確認します。
- ヘルプが具体的で、誤解の余地がないかを評価します。
b. 自動テストツール
- AxeやWAVEなどを使用して、ヘルプリンクや指示が正しく設定されているか検証します。
まとめ
WCAG 2.2の「3.3.5 ヘルプ」は、ユーザーが操作中に必要なサポートを受けられるようにすることで、すべてのユーザーにとって使いやすいウェブ体験を提供することを目的としています。
実装ポイント
- フォームや操作に関する具体的なヘルプを提供する。
- 入力形式や必須フィールドを明示する。
- 必要に応じて、リアルタイムのアシスタントを導入する。
これにより、ユーザーはスムーズに操作を完了し、エラーを最小限に抑えることができます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。