1.3.5 入力目的の特定

定義

ユーザーが入力する目的を、自動的に特定できるようにすること。
具体的には、HTMLフォームの入力欄に自動入力や支援技術が活用できるようなセマンティクスを付与する。

要件

ユーザーが氏名・住所・メールアドレスなどを入力するフォームに対し、HTMLの autocomplete 属性やセマンティックな情報を使って、その入力欄の意味（目的）を明示する。

具体的な対応方法

適切なautocomplete属性の使用例

<label for="given-name">名</label>
<input id="given-name" name="given-name" autocomplete="given-name">

<label for="email">メールアドレス</label>
<input id="email" name="email" autocomplete="email">

姓	family-name
名	given-name
メールアドレス	email
電話番号	tel
郵便番号	postal-code
都道府県	address-level1
市区町村	address-level2
クレジットカード番号	cc-number
誕生日（年）	bday-year

具体例

達成しているフォームの例

<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">
</form>

• スクリーンリーダーや支援技術が自動的に入力欄の目的を把握できる。
• ブラウザのオートコンプリート機能やパスワードマネージャとも連携可能。

非達成の例

<input type="text" name="user1">

• autocomplete 属性がないため、支援技術が何を入力すべきか判断できない。
• 入力補助機能（音声入力・オートフィル）が働かない。

利点

自動入力の活用

ブラウザのオートフィルが有効に動作し、ユーザーの負担軽減につながる

支援技術との連携

スクリーンリーダー等が入力欄の意味を把握しやすくなる

決済や個人情報入力の円滑化

クレジットカード番号、住所、連絡先などの正確な入力を支援

一貫性のあるUI/UX

入力項目の意味づけが明確で、再利用可能な設計がしやすくなる

注意点

• autocomplete=”off” を不必要に使用しないこと（アクセシビリティの妨げになります）
• すべての入力欄に適切なautocompleteを割り当てることで、WCAG 2.1 AA準拠となります
• 特に 個人情報・連絡先・支払い情報を扱うフォームでは重要性が高い

一覧に戻る