データに合うinput typeを選ぶ
email、tel、url、number、dateはキーボード、検証、支援技術に影響します。電話番号には先頭ゼロ、プラス、空白があるため、通常は数学的なnumberではありません。
inputmodeとautocompleteを補助情報として使い、最終検証はサーバーで行います。
キーボードが操作を隠さないか確認
iOS SafariとAndroid Chromeでページ下部の項目を選び、入力欄、エラー、次の操作が見えるか確認します。固定CTA、同意表示、チャットボタンはキーボードと重なりやすい要素です。
- 最初と最後の入力欄
- 縦向きと横向き
- ズームと文字拡大
- 次へ、完了、戻るキー
実際の自動入力データを使う
自動入力はキーイベントなしで複数項目を更新します。テスト用の氏名、住所、電話、パスワード管理ツールを使い、ラベルと国別項目が正しく更新されるか確認します。
ログインと決済ではパスワード管理、ワンタイムコード、貼り付けも確認します。
エラーを具体的で復旧可能にする
送信失敗後はエラー概要または最初の無効項目へフォーカスし、修正方法を近くに表示します。赤い枠だけでは色覚特性やスクリーンリーダーに十分ではありません。
正しい入力は保持し、通信失敗、タイムアウト、二重送信にも明確な状態を用意します。
最も遅い成功経路を完了する
低速回線、長い氏名、国際電話、複雑な住所、添付ファイルで一度完了します。各段階のviewport、キーボード状態、期待値、結果を記録します。