入力した番号や貼り付けた番号が変わってしまう入力マスク

ネットショップの購入手続きで、荷物を発送したときにSMSで知らせるため、電話番号を入力します。欄の中には (__) - と形式が描かれていて、何を入力すればよいかが一目で分かり、入力すると数字が空いた枠を埋めていきます。開発者は、よく使われる入力マスクのライブラリーを1行で組み込むか、数字が入るたびに括弧とハイフンを足す数行のコードを自分で書いて、この欄を作ります。

利用者が、連絡先に「+1 212 555 0147」と保存してある自分の番号をコピーして貼り付けます。欄には「(121) 255-5014」と表示されます。電話番号らしく見えるので「次へ」を押すと、お知らせは別の人に届きます。マスクには10個の枠しかなく、最初に来た10桁の数字で順に埋めるためです。国番号の1は市外局番の最初の数字になり、最後の7は消えます。先に「+1」と入力しても同じで、+は何の知らせもなく捨てられ、1が最初の枠に入ります。2026年10月に、Chromiumで、Inputmask 5.0、IMask 7.6、Maska 3.2と、下の手書きのコードで試したところ、どれも貼り付けた番号を「(121) 255-5014」にしました。IMaskのイシュートラッカーにも、+7のマスクで、先頭に8を付けて貼り付けた番号がおかしくなるという同じ種類の報告があります。

作り方の違いによって、ほかにも次のように問題が出ます。

• ライブラリーの場合は、欄にフォーカスが移るとすぐに、パターンが欄の値になります。スクリーンリーダーは括弧と空いた枠を欄の中身として読み上げます。Inputmaskの利用者からは、「underline underline underline…」と読み上げられるという報告があります。
• 手書きのコードの場合は、変更のたびに値を組み立て直すため、カーソルが末尾へ飛びます。4桁目の間違いに気づいて消し、正しい数字を入力すると、その数字は最後に付きます。「(212) 550-1479」になってしまいます。

ここで満たしていない達成基準はなく、このガイドで扱うのはベストプラクティスです。達成基準3.3.2「ラベル又は説明」は、入力が必要な場所にラベルや説明を求めており、解説書（Understanding）は、入力する形式を示してもよいとしています（達成方法G89、形式と例を示す）。2つの修正前は、どちらもこれを満たします。欄にはラベルがあり、ライブラリーのパターンは形式まで示しています。番号を複数の書き方で受け付けることは、WCAGのどこにも求められていません。

このガイドの助言の根拠は、デザインシステムや利用者テストで得られた知見です。GOV.UKの電話番号のパターンは、入力マスクを避けるよう勧めています。利用者が好きな書き方で番号を入力しにくくなり、ほかの場所から番号を写して確かめにくくなるためです。そして、スペース、ハイフン、ダッシュ、括弧を受け付け、国番号と市外局番にも対応するよう求めています。Filament Groupは、空いた枠はフォーカスしたときに読み上げられても「意味のない雑音」にしかならず、入力中にスクリプトが値を書き換えると、スクリーンリーダーが値の切れ端を読み上げることがあると述べています。

問題は、マスクが受け取った文字をどう扱うかにあります。マスクは決まった枠の数を持つ1つの形式しか知らず、文字を順に読み、+やスペースのように形式に合わない文字は捨て、数字を次の枠に入れて、枠がなくなったところで止まります。別の書き方の番号は収まらず、何を捨てたかは利用者に伝わりません。カーソルが飛ぶのはブラウザーの動作です。スクリプトが入力欄の値を設定すると、HTMLの仕様によってカーソルはテキストの末尾に移るため、変更のたびに値を組み立て直すハンドラーは、カーソルを元の位置から動かしてしまいます。

1か所だけ、達成基準に近い部分があります。達成基準3.3.1「エラーの特定」は、ページが検出した入力エラーをテキストで説明することを求めており、解説書は、値が大きすぎたり小さすぎたりして、ページのコードが許される範囲に自動で変える場合も、そのエラーは説明しなければならないとしています。+と数字1つを黙って捨てるマスクは、これに近い状態です。下の修正はどちらも何も捨てないため、この問題は起きません。

マスクの形式どおりに1桁ずつ番号を入力する人以外は、誰でもこの問題に出会います。番号を貼り付ける人、ブラウザーに自動入力させる人、カードに印刷されたとおりに書く人です。連絡先アプリに保存した番号や、ブラウザーが自動入力する番号には、先頭に国番号が付いていることがあるため、貼り付けた番号が合わないのは、まれなことではありません。

10グループ中4グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 視覚を使わない 欄にフォーカスがあり何も入力していないとき、値は(__) - というパターンなので、スクリーンリーダーは括弧と空いた枠を欄の中身として読み上げます。数字を入れていくと、数字と空いた枠が混ざって読み返され、貼り付けた番号が別の番号に変わっても、そのことは読み上げられません。
• 手の操作が限られる スイッチやマウススティック、指1本で入力する人は、キーを押す回数を減らすために番号をコピーしたり、ブラウザーに自動入力させたりします。マスクは先頭に+1の付いた番号を別の番号に変えてしまい、カーソルが末尾へ飛ぶ欄で直すには、さらに何度もキーを押すことになります。
• 言語・認知・学習の能力が限られる コピー元の番号と見比べて確かめるのは、欄が別の形で表示していると難しく、数字まで変わっているとさらに難しくなります。(121) 255-5014も電話番号らしく見えるため、間違っていると気づくきっかけがありません。
• 視覚が限られる 拡大表示では、欄の一部しか見えないことがあります。数字を直したあとにカーソルが末尾へ飛ぶと、次の数字は、見ていた数字から離れた末尾に入ります。

欄にはラベルがあり、ページはaxeのチェックを通り、スキャンは何も貼り付けません。EaseWebの診断は、電話番号の欄には+1 212 555 0147を、カード番号の欄には4242 4242 4242 4242を、スクリプトで貼り付け、フォームは送信せずに値を元に戻します。数字が変わってしまった欄と、値が空いた枠のパターンになっている欄を、人が試す項目として挙げます。達成基準の不適合ではないため、問題としては報告しません。カーソルがどこへ行くか、数字を入れるたびにスクリーンリーダーが何を読み上げるかは、人が確かめる必要があります。コーディングアシスタントに「(999) 999-9999の形式に整形する電話番号欄」を頼むと、どちらの修正前のコードも返ってくることがあります。