適合レベル
AA
※各レベルについては適合レベルとはをご覧ください
概要
住所や氏名などの入力フォームには、適切なautocomplete属性を設定し、お客さまの入力を補助する。
具体的な実装方法
1.3.5 AA
1. ⭕️良い例
HTMLの<input>要素などにautocomplete属性を追加し、その値としてWCAGが定義するトークン（HTML 5.2の仕様に基づく）を指定します。
ポイント
- 各入力欄の目的に最も合致する
autocompleteの値を指定します。例えば、氏名にはname、メールアドレスにはemail、電話番号にはtelを指定します。 label要素で入力欄のラベルを視覚的に提供することも、利用者にとって分かりやすさを向上させる上で重要です。
実装例 (HTML)
<form action="/example" method="post">
<label for="name">氏名:</label>
<input type="text" id="name" name="customer-name" autocomplete="name">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="customer-email" autocomplete="email">
<label for="address">住所:</label>
<input type="text" id="address" name="customer-address" autocomplete="street-address">
<label for="cc-number">クレジットカード番号:</label>
<input type="text" id="cc-number" name="credit-card-number" autocomplete="cc-number">
</form>2. ❌悪い例
autocomplete属性がない
- 属性自体が指定されていないため、ブラウザが入力欄の目的を解釈できません。
不適切なautocompleteの値
- 仕様で定義されていない独自の値（例:
autocomplete="your-name"）や、文脈と異なる値（例: メールアドレスの欄にautocomplete="name"）を指定している。
なぜ問題なのか
これらの実装では、ブラウザの自動入力機能が正しく動作せず、この達成基準が意図する支援を利用者に提供できません。
改善策
- 利用者に関する情報を要求する全ての入力欄に
autocomplete属性を追加します。 - WCAG 2.1の「入力目的のリスト」で定義されている適切な値を指定します。
3. プラットフォーム別の実装
Webページでは、HTMLのautocomplete属性を用いることで達成します。特別なWAI-ARIAの技術は必要ありません。
4. 特殊なケースへの対応
リストにない目的の入力欄
- ユーザーのペットの名前など、
autocompleteの標準的な値のリストに含まれない情報を求める入力欄については、この達成基準は適用されません。
セキュリティ
- ワンタイムパスワードや、セキュリティ上自動入力されるべきでないフィールドについては、
autocomplete="off"を指定して意図的に自動入力を無効にすることが許容されます。
確認観点
1.3.5 AA
1. 定量的な基準の担保
自動チェックツールでの確認:
- LighthouseやAxeなどのツールは、フォームの入力欄に
autocomplete属性があるか、またその値が有効かをチェックできます。
チェックリストの達成度:
2. 定性的な基準の担保
レビュー
- コードレビューにおいて、フォームの各入力欄に意味的に正しい
autocomplete属性が設定されているかを確認します。
専門家による監査
- アクセシビリティ専門家が、ブラウザの自動入力機能が実際に意図通りに動作するかをテストします。
- 支援技術（スクリーンリーダーなど）が、
autocomplete属性によって入力欄の目的を正しく解釈し、利用者に伝えているかを確認します。