# 郵便番号に戻ると番地が消えてしまう住所自動入力

Source: https://easeweb.dev/learn/postcode-lookup
Topics: フォーム > 複数ステップのフォームが、同じ内容を二度求めない (WCAG 3.3.7)
The fix: 番地と建物名には、YubinBangoのクラスを付けない専用の欄を用意し、住所検索で空にならないようにします。クラスは、都道府県、市区町村、町域のように、郵便番号から入力できる欄にだけ付けます。
Test with: keyboard, mouse, screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html https://www.w3.org/WAI/WCAG22/Techniques/general/G221 https://github.com/yubinbango/yubinbango

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

日本の住所入力フォームの多くは、郵便番号から住所を自動で入力します。新しく設置するなら、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キーでは発生するからです。キーボードの利用者は、それだけでなく、前の欄へ戻る途中で郵便番号欄を通っただけでも番地が消えてしまいます。

## 自動チェックとAIの限界

どの欄にもラベルがあり、マークアップも正しいため、axeなどの自動チェックは何も報告しません。こうしたチェックは、郵便番号と番地を入力してから郵便番号欄に戻る、という操作をしないからです。EaseWebの診断は、実際にこの順で操作します。郵便番号をすべて入力し、その後ろにある最大4つのテキスト欄の末尾に、番地の代わりに数文字を入力してから、TabキーかShift + Tabで郵便番号欄に戻ります。住所検索が空のままにしていた欄から、またはすべての欄から、その文字が消えていれば、`ew:postcode-clears-manual-check` として、人が確かめる項目に挙げます。READMEの例そのものが、利用者が入力する欄に `p-extended-address` を付けています。そのため、人が書き写しても、AIツールが書き写しても、同じ問題がそのまま入り込みます。

## 修正前：YubinBangoのクラスが付いた番地の欄

```html
<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>
```

番地の欄に `p-extended-address` が付いているため、郵便番号欄でキーを離すたびに、YubinBangoがこの欄を空にし、何も書き込みません。

## 修正後：番地専用の欄

```html
<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>
```

YubinBangoのクラスが付いていなければ、YubinBangoは番地の欄を空にすることも、書き込むこともありません。郵便番号に何度戻っても、何度直しても、利用者が入力した内容はそのまま残ります。都道府県と市区町村・町域は、これまでどおり一度空になってから入力し直されます。ただ、中身はすべて郵便番号から決まるので、消えた分は住所検索が書き戻します。READMEの最初の例のように、4つのクラスを一つの欄にまとめている場合も、直し方は同じです。その欄には `p-region p-locality p-street-address` だけを残し、以降の住所を入力する欄を、上のコードのように別に加えます。

## 実装の判断

住所検索が書き込む欄も、安全なのは利用者が内容に手を加えない間だけです。一つの郵便番号に町域がいくつもあるときに町域を書き足す、といった修正も、次に郵便番号欄でキーを離した時点で同じように消えてしまいます。この動きを変える設定は、YubinBangoにはありません。利用者がこうした欄を直すことが多いなら、番地の欄のラベルで、住所の残りはすべてここに入力すると伝えたうえで、実際に扱う郵便番号を使って、直すときの手順を確かめてください。

YubinBangoはフォーカスを動かさないため、3.2.1と3.2.2には関係しません。前身のajaxzip3は今も古いフォームで読み込まれており、検索のたびに住所欄へフォーカスを移します。この問題は「[操作するだけでページが変わるドロップダウンと入力欄](/ja/learn/context-changes)」で扱っています。

同じフォームで、ほかに次の2点も決めておきます。

- 自動入力：ブラウザーも入力できるように、各欄に `autocomplete="postal-code"`、`address-level1`、`address-level2`、`address-line1` を指定します。「[自動入力が効かないフォームの入力欄](/ja/learn/autocomplete)」を参照してください。そのうえで、保存した住所でフォームを自動入力し、ブラウザーが入力した番地が後で消えていないことを確かめてください。
- 全角数字：YubinBangoは、全角数字で入力された郵便番号を半角に変換してから検索するため、追加の対応は要りません。そうなっていない入力欄については「[全角数字を受け付けず、理由も示さない入力欄](/ja/learn/full-width-digits)」を参照してください。

## 修正の確認

1. マウスを使わずに、郵便番号をすべて入力してから番地を入れ、郵便番号欄に戻るまでShift + Tabを押す。番地が残っていることを確認する。
2. 郵便番号欄でBackspaceキーを押して数字を打ち直すか、別の郵便番号に変える。番地と建物名が残り、都道府県と町域が新しい郵便番号に合わせて変わることを確認する。
3. マウスで郵便番号欄をクリックし、数字を一つ変える。番地が残っていることを確認する。
4. スクリーンリーダーで、入力済みのフォームをもう一度たどる。住所の各欄が、入力した内容のまま読み上げられることを確認する。
5. マークアップの中で `p-region`、`p-locality`、`p-street-address`、`p-extended-address` を探し、利用者が自分で入力する欄に付いていないことを確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。住所入力フォームや住所検索のスクリプトを変更した際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。私たちは2026年10月に、GitHub Pagesで配布されているYubinBangoを、Chromium、Firefox、WebKitで実際にキーを押してテストしました。ほかの住所検索スクリプトやプラグインは、使うイベントも空にする欄も異なることがあるため、フォームで読み込んでいるものでテストしてください。住所のデータはGitHub Pages上の外部ファイルから読み込まれます。取得できなかったときの動きは、このガイドでは扱いません。後のステップで同じ住所をもう一度尋ねる場合（配送先の後の請求先など）は、「[同じ住所を二度入力させるチェックアウトフォーム](/ja/learn/redundant-entry)」で扱っています。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）