クレジットカード情報入力フォームのベストプラクティスを考える

背景

クレジットカード情報を入力するフォームの入力補助をする。

クレジットカード情報を入力するフォームの仕様

下記の入力フォームを用意する。

• クレジットカード番号
• セキュリティコード
• 有効期限

クレジットカード番号の桁数

クレジットカード番号の桁数は、カードブランドによって桁数が違う。

規格によって桁数が違うが対応しているカードブランドによって最大桁数を定義しておくと良い。今回は最大「16 桁」とする。

セキュリティコードの桁数

セキュリティコードの桁数についてもカードブランドによって桁数が違う。

今回は最大「4 桁」とする。

適切なマークアップをする（TL;DR）

後述の内容を加味して下記のような入力フォームになった。

<label for="credit-card-number">クレジットカード番号</label>
<input
  type="text"
  id="credit-card-number"
  inputmode="numeric"
  autocomplete="cc-number"
  pattern="[\d ]{14,16}"
  title="14〜16桁の番号を入力してください"
/>

見出しを付ける

labelを利用して入力フォームの見出しを付ける。

<label for="credit-card-number">クレジットカード番号</label> <input type="text" id="credit-card-number" />

labelのfor属性に対して、対象となるinputのidを指定して紐付ける。

placeholder属性は、入力中は非表示になってしまうため、入力中にこのinputが何の入力欄なのかユーザーが分からなくなってしまう。そのため、見出しの代わりにplaceholderは利用しないようにする。

placeholderのアクセシビリティ上の課題

placeholder属性に設定したテキストが、スクリーンリーダーで意図した読み上げがされないケースや読み上げられてもそれが入力値なのかplaceholderなのかが分からないケースがあるようだ。

また、視覚的な課題もある。入力値ではないことを視覚的に示すために、通常の場合はplaceholderの色を薄くする。そうするとコントラスト比が低くなり、アクセシビリティの問題が生じてしまう。

これらの理由から、placeholder属性はアクセシビリティ上の問題もあるため、可能な限り利用しない方が好ましい。

参考：プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog

数値の入力フォーム

番号用の入力フォームなのでtype="number"にしてしまいがちだが、そうするとカウントアップ・ダウンのための矢印がinput要素のUIに表示されてしまう。そのため、ここではtype="text"を利用する。

UI自体はCSSなどで調整ができるが、カーソルキーで入力値が変わったり、番号がイコール数値（number）ではないため、type="text"の利用が好ましい。

モバイル用に適切なキーボード操作させるためinputmode="numeric"を指定する。

<input type="text" inputmode="numeric" />

• https://caniuse.com/input-inputmode
• inputmode - HTML: ハイパーテキストマークアップ言語 | MDN

桁数の制限

クレジットカード番号を例に挙げると、最小 14 桁・最大 16 桁となる。

minlength="14"、maxlength="16"としても良いが、16 桁を超えた文字列をペーストされた場合にユーザーの意図しないところで切り捨てられてしまうのはあまり良くない（先頭にスペースが含まれているケースなど）。

<input type="text" minlength="14" maxlength="16" />

入力された値の正規化はバックエンドの処理で行うと良いだろう。

ここでは、pattern属性をpattern="[\d ]{14,16}"として:invalidな状態をユーザーに示す。ユーザビリティのために、パターン内容を説明するtitle属性を定義する。

<input type="text" pattern="[\d ]{14,16}" title="14〜16桁の番号を入力してください" />

input:invalid {
  border: 1px solid red;
}

• https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern

autocomplete属性で適切な情報を自動入力させる

都度ユーザーに情報を入力させるよりは、保存された情報の正確性は高いし、ユーザーにとっても利便性は高い。

autocomplete属性でクレジットカード情報に関する情報は以下（ほかの値はこちら）。

クレジットカード番号を入力させるフォームに仕様した例は以下の通り。

<input type="text" autocomplete="cc-number" />

• https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete
• https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html

autocomplete属性を利用して自動入力されるカード情報

inputにautocomplete="cc-number"を付与するとブラウザの自動入力機能によって、あらかじめ登録しておいたクレジットカード情報をフォームに入力させることができる。

• iOS Safari
  • 「設定」→「Safari」→「自動入力」
  • 参考: iPhone の Safari で情報を自動入力する
• macOS Safari
  • 「Safari」→「環境設定」→「自動入力」
  • 参考: Mac の Safari で連絡先にある情報を自動入力する
• Chrome
  • chrome://settings/payments →「お支払い方法」
  • 参考: Google でのお支払い情報を管理する

デモ

※セキュリティ上、デモが正しく動作しない場合あり