WCAG 2.2 ガイドライン「1.3.5 入力目的の特定」Level AA について
はじめに
WCAG 2.2の「1.3.5 入力目的の特定」は、ユーザー情報を収集するフォームの各入力フィールドについて、その目的がプログラム的に特定可能であることを求めています。これにより、支援技術（スクリーンリーダーなど）がフォームの内容を正確に把握し、ユーザーに適切に伝えることができます。
この記事では、HTMLやCSS、JavaScriptを学び始めた方に向けて、具体的な実装方法やポイントをわかりやすく解説します。
1. 入力目的の特定とは？
フォームには、名前、メールアドレス、電話番号などの入力フィールドがあります。これらのフィールドの入力目的をプログラム的に特定することで、次のようなメリットがあります：
- スクリーンリーダーが適切に情報を読み上げる。
- ブラウザやデバイスの自動入力機能（例: 名前や住所の自動入力）が正しく機能する。
例えば、入力フィールドにautocomplete属性を使って、「このフィールドは名前を入力するためのもの」と指定することで、支援技術やブラウザがそのフィールドの目的を認識できます。
2. HTML5 autocomplete 属性を使用する
a. autocomplete属性の基本
autocomplete属性を使用すると、入力フィールドの目的を特定できます。
実装例
名前、メールアドレス、電話番号を収集するフォーム
<form>
<label for="name">名前：</label>
<input type="text" id="name" name="name" autocomplete="name">
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="tel">電話番号：</label>
<input type="tel" id="tel" name="tel" autocomplete="tel">
</form>
ポイント
autocomplete="name"で「名前を入力するフィールド」であることを指定。autocomplete="email"で「メールアドレスを入力するフィールド」であることを指定。
b. よく使うautocompleteの値
以下に、よく使用されるautocomplete属性の値を示します：
| 属性値 | 説明 |
|---|---|
name |
ユーザーのフルネーム |
given-name |
ユーザーの名前（名） |
family-name |
ユーザーの名字（姓） |
email |
メールアドレス |
tel |
電話番号 |
organization |
組織名 |
street-address |
番地や通り名 |
postal-code |
郵便番号 |
country |
国名 |
例: 住所フォーム
<form>
<label for="address">住所：</label>
<input type="text" id="address" name="address" autocomplete="street-address">
<label for="zip">郵便番号：</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code">
<label for="country">国名：</label>
<input type="text" id="country" name="country" autocomplete="country">
</form>
3. 実装時の注意点
a. autocomplete属性の値は正確に設定
autocomplete属性の値を間違えると、ブラウザが正しく解釈できなくなります。
不適切な例
<input type="text" id="name" name="name" autocomplete="fullname"> <!-- 不正な値 -->
改善例
<input type="text" id="name" name="name" autocomplete="name">
b. フォームラベルの関連付け
label要素を使用して、入力フィールドとそのラベルを関連付けます。これにより、支援技術が入力フィールドの内容を正しく伝えられるようになります。
例
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" autocomplete="email">
c. 入力支援を考慮
autocomplete属性を設定することで、ユーザーがブラウザの入力支援機能を利用しやすくなります。
4. アクセシビリティのメリット
a. ユーザー体験の向上
- 自動入力機能により、入力の手間が減少。
- 入力ミスを減らし、正確なデータ収集が可能。
b. 支援技術の対応強化
- スクリーンリーダーがフィールドの目的を読み上げることで、視覚障害者もフォームを利用しやすくなる。
5. よくある失敗例とその対策
a. autocomplete属性の設定忘れ
失敗例
<input type="text" id="name" name="name">
この例では、フィールドの目的がプログラム的に特定できません。
改善例
<input type="text" id="name" name="name" autocomplete="name">
b. autocomplete属性の不適切な値
失敗例
<input type="text" id="email" name="email" autocomplete="mail">
autocomplete="mail"は不正な値です。
改善例
<input type="email" id="email" name="email" autocomplete="email">
まとめ
WCAG 2.2の「1.3.5 入力目的の特定」は、フォーム入力フィールドの目的をプログラム的に特定可能にすることで、支援技術や自動入力機能をサポートする重要な基準です。
実装ポイント
- HTML5の
autocomplete属性を適切に設定。 label要素を使い、フォームフィールドの説明を明確にする。- 入力フィールドの目的を正確に定義し、入力支援を提供。
これを守ることで、ユーザーの入力体験を向上させるだけでなく、アクセシビリティの高いウェブフォームを構築できます！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。