WCAG 2.2 ガイドライン「3.3.3 エラーの修正提案」Level AA について
はじめに
WCAG 2.2の「3.3.3 エラーの修正提案」は、入力エラーが検出され、修正方法が分かっている場合、ユーザーに修正の提案を提供することを求めています。この基準は、ユーザーがエラーを特定しやすくし、正しい入力を行えるようにサポートするものです。
1. 基準の概要
要件
- 入力エラーが検出された場合、修正提案をユーザーに提供します。
- 提案を提供することで、エラーを迅速に解決できるようにします。
- セキュリティや目的が損なわれる場合は、修正提案を省略することが認められます。
対象となるエラー
- 必須項目が未入力
- 指定されたデータ形式に従っていない入力
- 限られた選択肢から選択されていない入力
2. 実装方法
a. 必須フィールドの修正提案
必須項目が未入力の場合、入力が必要であることを明確に伝えます。
例: 必須フィールドのエラー提案
<form id="form">
<label for="name">名前 (必須):</label>
<input type="text" id="name" name="name" aria-required="true">
<span id="nameError" style="color: red; display: none;">名前を入力してください。</span>
<button type="submit">送信</button>
</form>
<script>
document.getElementById('form').addEventListener('submit', function(event) {
const nameInput = document.getElementById('name');
const nameError = document.getElementById('nameError');
if (nameInput.value.trim() === '') {
event.preventDefault();
nameError.style.display = 'inline';
nameInput.setAttribute('aria-invalid', 'true');
} else {
nameError.style.display = 'none';
nameInput.removeAttribute('aria-invalid');
}
});
</script>
b. データ形式エラーの修正提案
入力が特定の形式に従っていない場合、その形式を示し、正しい例を提示します。
例: メールアドレス形式のエラー提案
<form id="emailForm">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" placeholder="例: example@example.com">
<span id="emailError" style="color: red; display: none;">有効なメールアドレスを入力してください。</span>
<button type="submit">送信</button>
</form>
<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
const emailInput = document.getElementById('email');
const emailError = document.getElementById('emailError');
if (!emailInput.validity.valid) {
event.preventDefault();
emailError.style.display = 'inline';
emailInput.setAttribute('aria-invalid', 'true');
} else {
emailError.style.display = 'none';
emailInput.removeAttribute('aria-invalid');
}
});
</script>
c. 許容値外の入力エラーの修正提案
入力値が許容範囲外である場合、正しい範囲を示し、具体的な値の例を提供します。
例: 数値の範囲エラー
<form id="ageForm">
<label for="age">年齢 (1～100の間):</label>
<input type="number" id="age" name="age" min="1" max="100">
<span id="ageError" style="color: red; display: none;">年齢は1から100の間で入力してください。</span>
<button type="submit">送信</button>
</form>
<script>
document.getElementById('ageForm').addEventListener('submit', function(event) {
const ageInput = document.getElementById('age');
const ageError = document.getElementById('ageError');
if (ageInput.value < 1 || ageInput.value > 100 || ageInput.value === '') {
event.preventDefault();
ageError.style.display = 'inline';
ageInput.setAttribute('aria-invalid', 'true');
} else {
ageError.style.display = 'none';
ageInput.removeAttribute('aria-invalid');
}
});
</script>
3. アクセシビリティのメリット
a. ユーザビリティの向上
- エラー修正の提案により、ユーザーは問題を迅速に理解し、解決できます。
b. ストレスの軽減
- 明確な修正方法が提示されることで、入力ミスに対するユーザーの不安や混乱を軽減します。
c. 支援技術との連携
- 提案内容がテキストで明示されているため、スクリーンリーダーでもエラー修正がわかりやすくなります。
4. よくある失敗例とその改善策
a. エラー内容を示さない
失敗例
<p>入力にエラーがあります。</p>
改善策
- 具体的なエラー箇所と修正方法を提示します。
<p>メールアドレスが無効です。例: example@example.com</p>
b. 修正方法を提示しない
失敗例
- 「入力に問題があります」とだけ表示。
改善策
- 修正例や期待される入力形式を具体的に示す。
<p>日付は yyyy/mm/dd 形式で入力してください。例: 1990/01/01</p>
5. テスト方法
a. 手動テスト
- フォームに不正なデータを入力して送信します。
- エラー箇所が明確に特定され、修正方法が提示されていることを確認します。
b. 自動テストツール
- AxeやWAVEなどを使用して、エラー表示と修正提案の適切性をチェックします。
まとめ
WCAG 2.2の「3.3.3 エラーの修正提案」は、エラー検出時に具体的な修正方法を提供することで、ユーザーが正しいデータを入力できるようにサポートすることを目的としています。
実装ポイント
- エラー箇所を明確に特定する。
- 修正方法を具体的に提示する。
- 支援技術と連携するためにARIA属性を活用する。
これにより、ユーザーはエラーをスムーズに修正し、快適にウェブコンテンツを利用できるようになります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。