トピックを検索
自動入力が効かないフォームの入力欄
配送先フォームが自動入力をオフにし、独自のautocomplete値を使っているため、ブラウザーはどの欄が名前、メール、郵便番号、電話番号なのか判断できません。
autocomplete="off" 問題
自動入力に頼る人が、名前、メール、郵便番号、電話番号を一文字ずつ手で入力しなければなりません。
薬局のサイトで、いつもの処方薬の配送を申し込みます。フォームが尋ねるのは、氏名、メールアドレス、郵便番号、電話番号の四つで、誰でも覚えている情報です。どの欄にも分かりやすいラベルがあり、キーボードでも移動できます。しかし「氏名」の欄を選んでも、ブラウザーは何も候補を出しません。ほかのサイトでいつも使う保存済みの情報が現れず、スマートフォンの候補バーも空のままです。利用者は四つすべてを一文字ずつ入力します。
1.3.5は、利用者についての情報を集める欄の目的を、ソフトウェアが判断できることを求めています。HTMLでは、HTML標準の一覧にあるトークンをautocomplete属性に指定します。このフォームは、ブラウザーに手がかりを何も与えていません。formにautocomplete="off"があり、電話番号の欄はそれを引き継ぎ、氏名の欄にも同じ指定があります。メールアドレスの欄はautocomplete="e-mail"、郵便番号の欄はautocomplete="postcode"です。どちらももっともらしく見えますが、トークンではないため無視されます。ブラウザーは欄の名前やラベルから推測しますが、推測は目的の宣言ではなく、よく外れます。
すべてを手で入力する負担は誰にでもかかり、画面の半分をキーボードが覆うスマートフォンでは特に重くなります。
10グループ中3グループに影響
- 全盲 （影響なし）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響あり）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 届く範囲・力が限られる 運動機能に障害があり、一回の入力にも労力や痛みを伴う人が、すべてを手で入力しなければなりません。
- 言語・認知・学習の能力が限られる 記憶や認知に困難がある人は、郵便番号や電話番号を思い出せなかったり、打ち間違えたりします。同じトークンで欄の横に見慣れたアイコンを表示するツールもあり、文字を読むのが難しい人の助けになります。
- 手の操作が限られる 音声入力やスイッチで操作する人は、メールアドレスの入力に時間がかかり、間違いも起きやすくなります。
axeのautocomplete-validルールは、独自のe-mailとpostcodeを検出します。しかしautocomplete="off"は合格とし、属性のない欄にも何も言わないため、氏名と電話番号の欄は合格します。AIによる修正は、「ブラウザーの候補を止める」ためにautocomplete="off"を足したり、欄の名前をそのまま属性に写したりしがちです。各トークンが欄の内容と合っているか、その欄が本人について尋ねているのか他人についてなのかは、人が確認します。
試してみる
ブラウザーで保存済みの情報を選んだつもりで、「自動入力を試す」を押してください。
自動入力できるのは、標準のトークンで目的を示している欄だけです。各欄の下で、ブラウザーに何が伝わっているか見てください。
問題あり 修正できますか？
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
標準のautocompleteトークンで、各欄の目的をブラウザーに伝えます。
- 1利用者本人の情報を尋ねるすべての欄に、目的に合ったautocompleteトークンを付ける。
- 2HTMLの自動入力一覧にあるトークンだけを使う。phoneではなくtel、postcodeではなくpostal-code。
- 3本人の情報について、欄でもformでも自動入力をオフにしない。
<form autocomplete="off"> <label for="name">氏名</label> <input id="name" name="name" type="text" autocomplete="off"> <label for="email">メールアドレス</label> <input id="email" name="email" type="text" autocomplete="e-mail"> <label for="postcode">郵便番号</label> <input id="postcode" name="postcode" type="text" autocomplete="postcode"> <label for="phone">電話番号</label> <input id="phone" name="phone" type="text"></form><form> <label for="name">氏名</label> <input id="name" name="name" type="text" autocomplete="name"> <label for="email">メールアドレス</label> <input id="email" name="email" type="email" autocomplete="email"> <label for="postcode">郵便番号</label> <input id="postcode" name="postcode" type="text" autocomplete="postal-code"> <label for="phone">電話番号</label> <input id="phone" name="phone" type="tel" autocomplete="tel"></form>すべての欄にラベルがありますが、目的を宣言している欄はありません。二つはオフ、一つはformからオフを引き継ぎ、二つはHTMLの一覧にない値を使っています。
各欄がHTMLの一覧にあるトークンで目的を示すので、ブラウザー、パスワード管理ツール、スマートフォンのキーボードが、それぞれに合った保存済みの情報を候補に出し、フォーム全体を一度で入力できます。formのoffを外し、メールアドレスと電話番号には合ったtypeを付けたので、画面キーボードも適切なものになります。
トークンは正確に。 一覧は決まっていて短いものです。name、given-name、family-name、email、tel、street-address、address-line1、address-level1（都道府県）、address-level2（市区町村）、postal-code、country-name、bday、organization、username、new-password、current-password、one-time-codeなどです。phone、zip、postcode、e-mailは正しく見えても何も起きません。
フォームの欄に合わせます。 姓と名を別々に尋ねるなら、nameを二度使わずfamily-nameとgiven-nameを使います。フリガナの欄には標準のトークンがないため、無理に当てはめません。住所を複数の欄に分けるならaddress-level1、address-level2、address-line1、postal-codeを、一つのtextareaならstreet-addressを使います。
配送先と請求先。 住所を二つ尋ねるときは、autocomplete="shipping postal-code"とautocomplete="billing postal-code"のように接頭辞を付けます。付けないと、両方に同じ住所が入ることがあります。
他人についての欄。 1.3.5の対象は利用者本人の情報です。贈り先の氏名や、紹介フォームの友人のメールアドレスは本人の情報ではなく、本人の情報で埋めるのは誤りです。こうした欄には個人情報のトークンを付けません。ほかの人に届ける配送先には、そのためにあるshippingを使います。
検索、コード、一度きりの欄。 検索欄や、キャプチャのように値を記憶させない欄ならautocomplete="off"で構いません。SMSで届く確認コードにはone-time-codeを使うと、スマートフォンがメッセージからコードを候補に出せます。
コンポーネント。 共通の入力欄コンポーネントでautocompleteを指定できるようにし、メール、電話番号、住所の種類では正しいトークンとtypeを既定にします。例のように一語違う手書きの値は、レビューでは見逃されます。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得
修正の確認
マウスを使わない4つの確認
確認方法： 自動入力、パスワード管理ツール、タッチ
OS、ブラウザー、パスワード管理ツールと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通の入力欄コンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。トークンの使い方はブラウザーやパスワード管理ツールごとに異なり、offを独自に無視するものもあります。1.3.5が求めるのは目的の宣言で、どこでも自動入力が成功することではありません。決済用のiframeや外部ウィジェットの欄は、それを管理する側で同じ確認が必要です。利用者が使うブラウザーやツールで、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。