WCAG 2.2 ガイドライン「3.3.6 エラー防止（すべて）」Level AAA について
はじめに
WCAG 2.2の「3.3.6 エラー防止（すべて）」は、ユーザーが情報を送信する際にエラーを防ぐ仕組みを提供することを求めています。この基準は、送信前にエラーを検出し、修正の機会を提供することで、ユーザーが正確に情報を入力し送信できるようにサポートします。
1. 基準の概要
要件
次のいずれか、または複数を満たすこと：
- ユーザーが入力内容を見直し・修正できる機能を提供する。
- 入力内容が正しいかどうかを送信前に確認できる機能を提供する。
- ユーザーが誤った操作をした場合でも、入力データを回復できる仕組みを提供する。
対象となる場面
- ユーザーが情報を送信するすべてのウェブページ（例: フォーム、購入手続き、登録プロセス）
2. 実装方法
a. 入力内容の見直し・修正機能の提供
送信前に入力内容を確認し、必要に応じて修正できる画面を設けます。
例: 入力内容の確認画面
<form id="confirmForm">
<h2>入力内容を確認してください</h2>
<label for="name">名前:</label>
<input type="text" id="name" name="name" value="山田太郎" readonly><br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" value="taro@example.com" readonly><br>
<button type="button" id="editButton">修正する</button>
<button type="submit">送信する</button>
</form>
<script>
document.getElementById('editButton').addEventListener('click', function() {
alert('入力内容を修正できます。');
document.querySelectorAll('#confirmForm input').forEach(input => {
input.removeAttribute('readonly');
});
});
</script>
b. 送信前のエラー確認
ユーザーが送信ボタンをクリックする前に、入力内容を検証し、エラーを通知します。
例: クライアントサイドバリデーション
<form id="errorCheckForm">
<label for="phone">電話番号 (例: 090-1234-5678):</label>
<input type="tel" id="phone" name="phone" required pattern="\d{3}-\d{4}-\d{4}">
<span id="phoneError" style="color: red; display: none;">正しい形式で入力してください。</span><br>
<button type="submit">送信</button>
</form>
<script>
document.getElementById('errorCheckForm').addEventListener('submit', function(event) {
const phoneInput = document.getElementById('phone');
const phoneError = document.getElementById('phoneError');
if (!phoneInput.validity.valid) {
event.preventDefault();
phoneError.style.display = 'inline';
} else {
phoneError.style.display = 'none';
}
});
</script>
c. データ回復の仕組みを提供
送信エラーや削除後にデータを回復できる仕組みを実装します。
例: 削除データの回復
<div id="dataContainer">
<p id="data">このデータは削除される可能性があります。</p>
<button id="deleteButton">削除</button>
<button id="recoverButton" style="display: none;">復元</button>
</div>
<script>
document.getElementById('deleteButton').addEventListener('click', function() {
document.getElementById('data').style.display = 'none';
document.getElementById('recoverButton').style.display = 'inline';
});
document.getElementById('recoverButton').addEventListener('click', function() {
document.getElementById('data').style.display = 'block';
document.getElementById('recoverButton').style.display = 'none';
});
</script>
3. アクセシビリティのメリット
a. ユーザーエラーの削減
- 送信前に入力内容を確認する機能があると、誤入力を防ぎます。
b. 信頼性の向上
- ユーザーは、誤った操作や削除を回避できる仕組みにより、ウェブサイトへの信頼を持てます。
c. スムーズな操作
- エラーが減ることで、ユーザーは快適に操作を完了できます。
4. よくある失敗例とその改善策
a. 確認画面の欠如
失敗例
- 送信ボタンを押した瞬間にデータが送信され、修正の機会がない。
改善策
- 送信前に確認画面を追加する。
<button type="button" id="previewButton">入力内容を確認する</button>
<button type="submit" style="display: none;" id="submitButton">送信</button>
b. 入力エラーの見逃し
失敗例
- 入力形式が間違っていてもエラーが通知されない。
改善策
- クライアントサイドバリデーションを実装し、エラー内容を明示する。
<small id="emailError" style="color: red;">正しい形式のメールアドレスを入力してください。</small>
5. テスト方法
a. 手動テスト
- フォームに意図的に誤ったデータを入力して送信し、エラーが適切に表示されるか確認します。
- 確認画面やデータ回復の仕組みが機能するか確認します。
b. 自動テストツール
- AxeやWAVEなどを使用して、バリデーションやエラー通知が適切に機能しているかをチェックします。
まとめ
WCAG 2.2の「3.3.6 エラー防止（すべて）」は、ユーザーが情報を送信する際にエラーを防ぐ仕組みを提供することで、より安全で信頼性の高いウェブ体験を実現することを目的としています。
実装ポイント
- 入力内容の確認画面を提供する。
- 送信前にエラーを通知するバリデーションを実装する。
- データ回復の仕組みを導入する。
これにより、ユーザーは安心して情報を入力し送信できる環境を整えることができます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。