WCAG 2.2 ガイドライン「3.3.1 エラー識別」Level A について
はじめに
WCAG 2.2の「3.3.1 エラー識別」は、入力エラーが検出された場合、そのエラー項目が特定され、テキストでエラー内容が説明されることを求めています。この基準は、ユーザーが入力エラーを認識し、修正できるようにするための基本的な要件です。
1. 基準の概要
要件
- 入力フォームでエラーが検出された場合：
- エラーが発生した項目を特定する。
- エラー内容をテキストで明確に説明する。
対象となるエラーの種類
- 必須項目が未入力
- 指定された形式に従っていない入力
- 許容範囲を超えた値の入力
2. 実装方法
a. 必須フィールドのエラー識別
必須項目が未入力の場合、エラーを示し、ユーザーに入力を促します。
例: 必須フィールドのエラー表示
<form id="sampleForm">
<label for="name">名前 (必須):</label>
<input type="text" id="name" aria-required="true">
<span id="nameError" style="color: red; display: none;">このフィールドは必須です。</span>
<button type="submit">送信</button>
</form>
<script>
document.getElementById('sampleForm').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" aria-required="true">
<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" 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. エラー箇所が特定できない
失敗例
- 「エラーがあります」とだけ表示され、どのフィールドがエラーなのか分からない。
改善策
- エラー箇所を特定し、具体的な説明を表示する。
<span id="error" style="color: red;">名前のフィールドは必須です。</span>
b. エラー内容が不明確
失敗例
- 「入力が間違っています」とだけ表示され、具体的な理由が分からない。
改善策
- フィールドごとにエラー内容を具体的に説明する。
<span id="error" style="color: red;">メールアドレスは正しい形式で入力してください。</span>
5. テスト方法
a. 手動テスト
- フォームに間違ったデータを入力して送信。
- エラー箇所が正確に特定され、具体的な説明が表示されていることを確認。
b. 自動テストツール
- AxeやWAVEなどを使用して、エラー表示が適切に行われているか確認します。
まとめ
WCAG 2.2の「3.3.1 エラー識別」は、入力エラーをユーザーが正確に把握し、修正できるようにすることを目的としています。
実装ポイント
- 必須フィールドや形式エラーを検出し、明確に表示する。
- エラー内容を具体的に説明し、解決策を示す。
- スクリーンリーダー対応を考慮して
aria-invalidなどを活用する。
これにより、すべてのユーザーがエラーをスムーズに修正し、快適にフォームを利用できるようになります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。