要約

フォームフィールドにHTMLのautocomplete属性を設定すると、認知障害や身体障害を持つユーザーがこれらのフィールドを理解したり入力する作業が容易になります。

テクニック

例

例 1 — 電話番号のオートコンプリート

次の例では、電話番号を入力するための三つのフィールド（市外局番用一つと市内番号用一つずつ) を示しています。各フィールドの目的は、 autocomplete属性から識別できます。

<fieldset
   <label>Telephone:</label>
   (<input type="text" autocomplete="tel-area-code" id="area-code" aria-label="Area code"/>)
   <input type="text" autocomplete="tel-local-prefix" id="local-prefix" aria-label="Local number prefix"/> -
   <input type="text" autocomplete="tel-local-suffix" id="local-suffix" aria-label="Local number suffix"/>
</fieldset>
例 2 — 生年月日のオートコンプリート
<fieldset
   <label>Birth Date:</label>
   <select autocomplete="bday-year" id="birth-year" aria-label="Year">
   	…
   </select>
   <select autocomplete="bday-month" id="birth-month" aria-label="Month">
   	…
   </select>
   <select autocomplete="bday-day" id="birth-day" aria-label="Day">
   	…
   </select>
</fieldset>

よくある質問

入力ラベルでは不十分なのはなぜですか?

同じ情報に対する入力ラベルはサイトや言語によって異なるため、機械処理では信頼できません。 autocompleteの制御キーワードにより、ユーザーエージェントと支援技術は言語やスペルの特殊性を解析することなく目的を判断できます。

解説

リーディングシステムではウェブブラウザほど一般的ではありませんが、個人情報を保存しておくと、ユーザーが次回同じフィールドに遭遇したときにユーザーエージェントが自動的にその情報を入力できるようになります。出版物では、教育プログラムのコンテキストで、または出版社からの更新情報を受け取るためにサインアップする際に、この種の情報を求めることがあります。

この機能を提供するには、ユーザーエージェントはユーザーが入力した情報と、その情報を再度使用することが適切であるかを判定する必要があります。autocomplete属性は、この機械による判定の鍵となります。これにより、コンテンツ製作者はフォームフィールドに正確な機械可読セマンティクスを割り当てることができ、ユーザー エージェントはどのフィールドにどの情報を入力するべきかを判定できます。

属性のHTML定義には、使用できるセマンティクスのリストが含まれています。セマンティクスには、名前、住所、生年月日、電話番号などの情報が含まれます。WCAGドキュメントには、値の要約リストも記載されています。

autocomplete属性を使用すると、個人情報の入力を求められるたびに同じ情報を何度も再入力する必要がなくなるため、認知障害や身体障害を持つユーザーにとってフォームの入力がしやすくなります。

これらのセマンティクスを使用すると、ユーザーエージェントは他の方法でも理解を強化できます。たとえば、標準的な視覚的なヒント（電話や誕生日ケーキなどのアイコン）を追加して、各フィールドの目的をユーザーがさらに理解しやすいようにできます。

関連リンク