WCAG 2.2 ガイドライン「3.3.4 エラー防止（法的、財務、データ）」Level AA について
はじめに
WCAG 2.2の「3.3.4 エラー防止（法的、財務、データ）」は、ユーザーが重大な影響を及ぼす行動を行う前に、エラーを防ぐ仕組みを提供することを求めています。特に、法的拘束力のある契約、金銭取引、データの削除や変更、テスト回答の送信に関わる場面が対象です。
1. 基準の概要
要件
以下のいずれかの方法で、エラーを防止する仕組みを提供します：
- 入力や選択内容を見直し・修正する機能を提供する。
- 選択した操作を確認する手段を提供する。
- ユーザーが誤操作をした場合、データを回復できる仕組みを提供する。
2. 実装方法
a. トランザクションや購入手続きのエラー防止
法的拘束力のある操作や金銭取引の場面では、確認画面や修正機能を提供します。
例: 購入確認画面
<form id="purchaseForm">
<h2>購入内容を確認してください</h2>
<p>商品名: サンプル商品</p>
<p>価格: 3,000円</p>
<label>
<input type="checkbox" id="agree" required>
注文内容を確認しました
</label>
<button type="submit">購入する</button>
</form>
確認手順のスクリプト例
document.getElementById('purchaseForm').addEventListener('submit', function(event) {
if (!document.getElementById('agree').checked) {
event.preventDefault();
alert('注文内容を確認してください。');
}
});
b. データ削除のエラー防止
ユーザーがデータを削除する操作を行う際に、確認画面を表示します。
例: データ削除時の確認メッセージ
<button id="deleteButton">データを削除</button>
<script>
document.getElementById('deleteButton').addEventListener('click', function() {
const confirmation = confirm('本当にデータを削除しますか？この操作は元に戻せません。');
if (!confirmation) {
event.preventDefault();
}
});
</script>
c. テスト回答の送信確認
ユーザーが回答を送信する前に、内容を見直す機能を提供します。
例: テスト回答の確認画面
<form id="testForm">
<label for="answer">回答:</label>
<input type="text" id="answer" name="answer">
<button type="button" id="reviewButton">回答を確認</button>
<button type="submit" style="display: none;" id="submitButton">送信</button>
</form>
<script>
document.getElementById('reviewButton').addEventListener('click', function() {
const answer = document.getElementById('answer').value;
if (confirm(`以下の回答で送信しますか？\n\n回答: ${answer}`)) {
document.getElementById('submitButton').style.display = 'block';
}
});
</script>
3. アクセシビリティのメリット
a. 誤操作を防ぐ
- 確認や修正機能により、誤った操作を防ぎます。
b. ストレスの軽減
- 削除や送信前に内容を確認することで、操作後の後悔を減らします。
c. 信頼性の向上
- エラー防止機能により、ユーザーは安心して操作を行うことができます。
4. よくある失敗例とその改善策
a. 確認画面がない
失敗例
- 購入や削除操作が即座に実行され、確認画面が表示されない。
改善策
- 確認画面を追加し、ユーザーが操作内容を見直せるようにします。
<button id="confirmPurchase">購入を確定</button>
<script>
document.getElementById('confirmPurchase').addEventListener('click', function() {
if (!confirm('購入内容を確定しますか？')) {
event.preventDefault();
}
});
</script>
b. データ回復手段がない
失敗例
- 削除操作が元に戻せず、データが失われる。
改善策
- 削除済みデータを回復できる仕組みを提供します。
<button id="deleteButton">削除する</button>
<p id="deletedData" style="display: none;">削除されたデータです。</p>
<button id="restoreButton" style="display: none;">データを復元</button>
<script>
document.getElementById('deleteButton').addEventListener('click', function() {
document.getElementById('deletedData').style.display = 'block';
document.getElementById('restoreButton').style.display = 'block';
});
document.getElementById('restoreButton').addEventListener('click', function() {
document.getElementById('deletedData').style.display = 'none';
document.getElementById('restoreButton').style.display = 'none';
});
</script>
5. テスト方法
a. 手動テスト
- 各操作（購入、削除、送信）を試し、確認画面や修正機能が表示されることを確認します。
- 誤操作時にデータが回復できるか確認します。
b. 自動テストツール
- AxeやWAVEなどのツールを使い、フォームや操作のエラー防止が適切に実装されているかを検証します。
まとめ
WCAG 2.2の「3.3.4 エラー防止（法的、財務、データ）」は、ユーザーに重大な影響を与える操作に対して、エラーを防ぐ仕組みを提供することを求めています。
実装ポイント
- 確認画面を表示し、ユーザーが操作内容を見直せるようにする。
- 削除操作には確認メッセージやデータ回復手段を追加する。
- 回答送信前に見直し機能を提供する。
これにより、ユーザーの信頼を向上させ、安全で安心なウェブ体験を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。