全角数字を受け付けず、理由も示さない入力欄

ショップの購入手続きで、配送業者からの連絡用に電話番号を入力します。直前まで住所を入力していたので、日本語入力はオンのままです。ひらがなモードでは、IMEの設定によっては、数字が全角で入力されます。0123456789ではなく、０１２３４５６７８９です。読む人にとっては同じ数字で、かなと同じ幅で少し広く表示されるだけです。日本語の文書からコピーした番号が全角のこともあります。

この欄のスクリプトは半角の0〜9しか想定しておらず、よくある書き方は次の2つです。

• フォームを送信するときに番号を確認し、「正しい電話番号を入力してください。」とはじく。利用者は番号を見返し、数字が合っていることを確かめて送り直しますが、同じメッセージが出ます。番号は合っていて、幅だけが違うことは、どこにも書かれていません。
• 欄を数字だけに保つため、input のハンドラーでそれ以外の文字を削除する。このハンドラーにとって全角数字は0〜9ではないため、入力したそばから消えていき、メッセージも出ません。ひらがなモードで打ったハイフンは長音符の「ー」になり、同じように消えます。

数字そのものに誤りはありません。欄が、どの書き方で入力するかを伝えないまま値をはじいているので、問題は、そのときページが何を伝えるかにあります。

達成基準3.3.3「エラー修正の提案」は、入力エラーを検出し、修正方法が分かっている場合は、それを提案することを求めています。ページが求めているのは半角の数字だと、はっきりしています。確認で調べているのは、まさにそこだからです。それなのに「正しい電話番号を入力してください」は、そのことを伝えていません。この達成基準の解説書は、誰のための基準かも挙げています。認知に障害があり、エラーの直し方を理解しにくい人と、視覚に障害があり、直し方を正確に把握できないことがある人です。幅の違いはほとんど見分けがつかないため、どちらの人も、直し方を推測できません。

達成基準3.3.1「エラーの特定」は、ページが検出した入力エラーについて、どの項目かを特定し、テキストで説明することを求めています。1つ目の修正前は、これを満たします。メッセージは欄を示し、値が正しくないと伝えており、解説書も「Email is not valid」は3.3.1を満たすとしています。2つ目は満たしません。ハンドラーは受け付けない文字を検出して削除しますが、削除したことを伝えるテキストはどこにもありません。解説書は、ページが自動で値を変える場合にも触れており、そのときもエラーは利用者に説明しなければならないとしています。

日本語で入力する人なら、能力にかかわらず、この問題に出会うことがあります。数字が全角で入力されるのはIMEの設定の1つで、利用者の誤りではありません。下に挙げるのは、特に負担が大きい人です。

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

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

• 言語・認知・学習の能力が限られる メッセージは番号が間違っていると言いますが、番号は合っています。幅のことには何も触れないため、同じ数字を入力し直しては同じメッセージが出て、フォームをあきらめることもあります。
• 視覚が限られる 全角と半角の数字の違いは、主に1文字ごとの幅です。拡大して欄の一部しか見えていないと、その違いにも、入力したそばから数字が消えていくことにも気づきにくくなります。
• 視覚を使わない メッセージには数字の幅を確かめるよう促す言葉がありません。入力中にハンドラーが数字を消す場合は、消したことを伝える言葉もありません。送信したときには欄が空で、メッセージは番号が正しくないと言うだけです。
• 手の操作が限られる ゆっくり入力する人、片手やスイッチで入力する人は、電話番号だけでも何度もキーを押します。はじかれるたびに番号をすべて入力し直すことになり、日本語入力をオフにする操作も1つ増えます。

欄にはラベルがあり、メッセージも欄に関連付けられているため、マークアップに誤りはなく、スキャンも通ります。スキャンは文字を入力せず、日本語入力を使わずに確認する人は半角の数字しか入力しないため、番号の確認はいつも通ってしまいます。AIアシスタントに「数字だけを受け付ける電話番号欄」を頼むと、下の修正前のどちらかのコードが返ってくることがあります。EaseWebの診断は、数字を入力する欄に全角の番号を設定して input イベントを送ります。ハンドラーが番号を削除し、幅について何も示さない欄は3.3.1の問題として、ブラウザーによる入力チェックが有効なフォームで pattern が番号をはじき、欄の近くに幅を示す言葉もない欄は3.3.3の問題として報告します。診断はフォームを送信しないため、ページの日本語の部分にあるほかの電話番号、郵便番号、フリガナの欄は、人が試す項目として挙げます。