WCAG 2.2 ガイドライン「3.3.7 重複入力の防止」Level A について
はじめに
WCAG 2.2の「3.3.7 重複入力の防止」は、ユーザーが一度入力した情報を再入力しなくても良い仕組みを提供することを求めています。これにより、ユーザーの操作負担を軽減し、スムーズな利用体験を提供することができます。
1. 基準の概要
要件
同じプロセス内で、すでに入力済みまたは提供された情報を再度入力する必要がある場合、以下のいずれかを実現する必要があります：
- 自動入力（自動的にフォームに値を入力する）。
- 選択可能（ユーザーが入力済み情報を選択して再利用できる）。
例外
以下の場合は重複入力が許容されます：
- 再入力が必要不可欠な場合（例: セキュリティの理由）。
- 情報がコンテンツのセキュリティを確保するために必要な場合。
- 以前入力した情報が無効になっている場合。
2. 実装方法
a. 自動入力機能を提供
フォームフィールドに自動入力の仕組みを導入し、ユーザーが再入力する手間を省きます。
例: フォームの自動入力
<form>
<label for="name">名前:</label>
<input type="text" id="name" name="name" value="山田太郎" autocomplete="name"><br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" value="taro@example.com" autocomplete="email"><br>
<button type="submit">送信</button>
</form>
b. 入力済み情報を選択可能にする
ユーザーが過去に入力した情報を選択可能なオプションとして提供します。
例: ドロップダウンメニューで過去の情報を選択
<form>
<label for="address">住所:</label>
<select id="address" name="address">
<option value="home">自宅住所: 東京都新宿区</option>
<option value="office">勤務先住所: 東京都港区</option>
<option value="new">新しい住所を入力</option>
</select>
<div id="newAddress" style="display: none;">
<label for="newAddressInput">新しい住所:</label>
<input type="text" id="newAddressInput" name="newAddress">
</div>
<button type="submit">送信</button>
</form>
<script>
document.getElementById('address').addEventListener('change', function() {
if (this.value === 'new') {
document.getElementById('newAddress').style.display = 'block';
} else {
document.getElementById('newAddress').style.display = 'none';
}
});
</script>
c. 入力済みデータの保持と復元
フォームデータをセッションストレージやローカルストレージを活用して保持し、再訪時に復元します。
例: ローカルストレージを使用したデータ保持
<form id="dataForm">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username"><br>
<button type="submit">送信</button>
</form>
<script>
const usernameInput = document.getElementById('username');
// ページ読み込み時にデータを復元
window.addEventListener('load', () => {
if (localStorage.getItem('username')) {
usernameInput.value = localStorage.getItem('username');
}
});
// データを保存
usernameInput.addEventListener('input', () => {
localStorage.setItem('username', usernameInput.value);
});
</script>
3. アクセシビリティのメリット
a. 操作の効率化
- ユーザーは一度入力した情報を再度入力する必要がないため、作業が迅速になります。
b. フラストレーションの軽減
- 重複入力が不要になることで、ユーザーのストレスが減少します。
c. エラーの防止
- 過去の入力内容が再利用できるため、入力ミスを防ぎます。
4. よくある失敗例とその改善策
a. 再入力が必要なデザイン
失敗例
- 購入手続きで、住所やクレジットカード情報を毎回入力する必要がある。
改善策
- フォームに「前回の住所を使用」や「保存された情報を使用」といったオプションを追加します。
b. 入力内容が保持されない
失敗例
- ユーザーが戻るボタンを押すと、以前入力したデータが消える。
改善策
- ローカルストレージやセッションストレージを活用してデータを保持します。
5. テスト方法
a. 手動テスト
- フォームにデータを入力し、再度その情報が利用可能か確認します。
- 「自動入力」や「選択肢として表示」の機能が正しく動作しているか確認します。
b. 自動テストツール
- AxeやWAVEなどを使用して、重複入力が適切に排除されているか検証します。
まとめ
WCAG 2.2の「3.3.7 重複入力の防止」は、ユーザーの手間を削減し、スムーズな操作体験を提供するための重要な基準です。
実装ポイント
- 一度入力したデータを自動入力または選択可能にする。
- セッションやローカルストレージを活用してデータを保持する。
- 例外が適用される場合でも、理由を明示する。
これにより、すべてのユーザーが効率的で快適にフォームや操作を完了できるようになります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。