トピックを検索
郵便番号に戻ると番地が消えてしまう住所自動入力
YubinBangoは郵便番号欄でキーを離すたびに住所を検索し直すため、TabキーやShift + Tabで郵便番号欄に戻っただけで、入力した番地が消えてしまう
<input id="street" class="p-extended-address"> 問題
郵便番号を確かめたり直したりしようと戻ると、入力した番地が消えてしまい、もう一度入力することになる
日本の住所入力フォームの多くは、郵便番号から住所を自動で入力します。新しく設置するなら、ajaxzip3のREADME自身がYubinBangoを勧めています。欄にクラスを付けるだけで動くライブラリーです。あるショップの購入手続きは、YubinBangoのREADMEにある「住所欄を分ける場合」の例をもとに作られています。郵便番号に100-0001と入力すると、都道府県に「東京都」、市区町村・町域に「千代田区千代田」が入ります。利用者は次へ進み、最後の欄に番地と建物名の「1-1 Sunrise 501」を入力します。
ここで郵便番号を確かめようと、Shift + Tabで郵便番号欄へ戻ります。フォーカスが着いた途端、番地の欄が空になってしまいます。数字を直そうとすると、さらにひどくなります。郵便番号欄でBackspaceキーを一度押すと、都道府県、市区町村、番地がすべて空になり、数字を打ち直しても戻ってくるのは都道府県と市区町村だけです。町域の後ろに入力した内容は、すべて入力し直しです。
達成基準3.3.7「冗長な入力」は、利用者がすでに入力した情報を手続きの中で再び必要とする場合、自動で入力するか、選べるようにすることを求めています。この例では、ページが自分で番地を消してしまうので、利用者は番地をもう一度入力しなければなりません。それなのに、自動で入力し直す仕組みも、選んで入れ直す手段もありません。W3Cが3.3.7で挙げている例の多くは、後のステップで同じ情報をもう一度尋ねる場面です。ただ、達成基準の文言は後のステップに限っておらず、例の一つには、入力した情報が「フォームから消去されない」ことも挙げられています。
原因は、YubinBangoが反応するイベントにあります。YubinBangoは郵便番号欄の keyup で動きます。keyup は、数字を変えるキーだけでなく、欄の中で離したどのキーでも発生します。TabキーやShift + Tabのkeyupは移動した先の欄で発生するため、欄に着いただけで動いてしまいます。動くたびに、YubinBangoはまず4つのクラス（p-region、p-locality、p-street-address、p-extended-address）のどれかが付いた欄をすべて空にし、それから郵便番号で分かる内容を書き込みます。100-0001の場合、p-extended-address に書き込む内容はありません。READMEで「以降の住所」の欄に付いているのがこのクラスなので、その欄は空のまま残ります。
マウスの利用者も、郵便番号を直すと番地が消えてしまいます。欄をクリックしてもkeyupは発生しませんが、数字を消すBackspaceキーでは発生するからです。キーボードの利用者は、それだけでなく、前の欄へ戻る途中で郵便番号欄を通っただけでも番地が消えてしまいます。
10グループ中4グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 筋力・可動域 （影響あり）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 手の操作が限られる キーボードやスイッチの利用者は、Shift + Tabで郵便番号欄に戻るだけで番地が消えてしまいます。郵便番号を確かめるたびに、住所の残りを入力し直すことになります。
- 筋力や可動域が限られる キーを一つ押すのにも負担や痛みがある人が、番地と建物名をもう一度入力することになります。
- 言語・認知・学習の能力が限られる 欄ごとに確かめながら入力する人は、入力したはずの番地がいつの間にか消えていて、その理由も示されません。番地を思い出して入力し直すことになります。
- 視覚を使わない フォームを見直そうと戻ったスクリーンリーダーの利用者は、郵便番号を聞いた後、もう一度番地の欄まで進んで初めて、そこが空になっていることに気づきます。
どの欄にもラベルがあり、マークアップも正しいため、axeなどの自動チェックは何も報告しません。こうしたチェックは、郵便番号と番地を入力してから郵便番号欄に戻る、という操作をしないからです。EaseWebの診断は、実際にこの順で操作します。郵便番号をすべて入力し、その後ろにある最大4つのテキスト欄の末尾に、番地の代わりに数文字を入力してから、TabキーかShift + Tabで郵便番号欄に戻ります。住所検索が空のままにしていた欄から、またはすべての欄から、その文字が消えていれば、ew:postcode-clears-manual-check として、人が確かめる項目に挙げます。READMEの例そのものが、利用者が入力する欄に p-extended-address を付けています。そのため、人が書き写しても、AIツールが書き写しても、同じ問題がそのまま入り込みます。
試してみる
100-0001と番地を入力し、Shift + Tabで戻って、郵便番号を100-0002に直してみましょう
郵便番号欄に戻るときと、数字を変えるときに、番地の欄がどうなるかを見てください。そのあと修正を適用して、同じキー操作をもう一度試してください。
問題あり 修正できますか？
修正方法
番地には、住所検索が書き込まない専用の欄を用意する
- 1住所検索が書き込むのは、郵便番号から内容がすべて決まる欄だけにする
- 2利用者が自分で入力する内容は、住所検索が触れない欄で受け取る
- 3郵便番号に戻っても、直しても、利用者が入力した内容は残す
<form class="h-adr"> <span class="p-country-name" style="display:none;">Japan</span> <label for="zip">郵便番号</label> <input id="zip" class="p-postal-code"> <label for="pref">都道府県</label> <input id="pref" class="p-region"> <label for="city">市区町村・町域</label> <input id="city" class="p-locality p-street-address"> <label for="street">番地・建物名</label> <input id="street" class="p-extended-address"></form> <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><form class="h-adr"> <span class="p-country-name" style="display:none;">Japan</span> <label for="zip">郵便番号</label> <input id="zip" class="p-postal-code"> <label for="pref">都道府県</label> <input id="pref" class="p-region"> <label for="city">市区町村・町域</label> <input id="city" class="p-locality p-street-address"> <label for="street">番地・建物名</label> <input id="street" name="street"></form> <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>番地の欄に p-extended-address が付いているため、郵便番号欄でキーを離すたびに、YubinBangoがこの欄を空にし、何も書き込みません。
YubinBangoのクラスが付いていなければ、YubinBangoは番地の欄を空にすることも、書き込むこともありません。郵便番号に何度戻っても、何度直しても、利用者が入力した内容はそのまま残ります。都道府県と市区町村・町域は、これまでどおり一度空になってから入力し直されます。ただ、中身はすべて郵便番号から決まるので、消えた分は住所検索が書き戻します。READMEの最初の例のように、4つのクラスを一つの欄にまとめている場合も、直し方は同じです。その欄には p-region p-locality p-street-address だけを残し、以降の住所を入力する欄を、上のコードのように別に加えます。
住所検索が書き込む欄も、安全なのは利用者が内容に手を加えない間だけです。一つの郵便番号に町域がいくつもあるときに町域を書き足す、といった修正も、次に郵便番号欄でキーを離した時点で同じように消えてしまいます。この動きを変える設定は、YubinBangoにはありません。利用者がこうした欄を直すことが多いなら、番地の欄のラベルで、住所の残りはすべてここに入力すると伝えたうえで、実際に扱う郵便番号を使って、直すときの手順を確かめてください。
YubinBangoはフォーカスを動かさないため、3.2.1と3.2.2には関係しません。前身のajaxzip3は今も古いフォームで読み込まれており、検索のたびに住所欄へフォーカスを移します。この問題は「操作するだけでページが変わるドロップダウンと入力欄」で扱っています。
同じフォームで、ほかに次の2点も決めておきます。
- 自動入力：ブラウザーも入力できるように、各欄に
autocomplete="postal-code"、address-level1、address-level2、address-line1を指定します。「自動入力が効かないフォームの入力欄」を参照してください。そのうえで、保存した住所でフォームを自動入力し、ブラウザーが入力した番地が後で消えていないことを確かめてください。 - 全角数字：YubinBangoは、全角数字で入力された郵便番号を半角に変換してから検索するため、追加の対応は要りません。そうなっていない入力欄については「全角数字を受け付けず、理由も示さない入力欄」を参照してください。
修正の確認
5項目
確認方法： キーボード、マウス、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。住所入力フォームや住所検索のスクリプトを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。私たちは2026年10月に、GitHub Pagesで配布されているYubinBangoを、Chromium、Firefox、WebKitで実際にキーを押してテストしました。ほかの住所検索スクリプトやプラグインは、使うイベントも空にする欄も異なることがあるため、フォームで読み込んでいるものでテストしてください。住所のデータはGitHub Pages上の外部ファイルから読み込まれます。取得できなかったときの動きは、このガイドでは扱いません。後のステップで同じ住所をもう一度尋ねる場合（配送先の後の請求先など）は、「同じ住所を二度入力させるチェックアウトフォーム」で扱っています。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。