複数のデバイスやプラットフォームでフォームをテストする

フォームにはさまざまな方法で入力できます。 ユーザーは混雑したバスの中で立っているときに、スマートフォンでフォームを使用する可能性があります。 スクリーン リーダーや古いノートパソコンなどです さまざまなデバイスや状況でフォームが機能することを確認する方法を見てみましょう。

キーボード ユーザーでもフォームが機能することを確認する

まず、キーボードのみを使用してフォームに入力し、フォームのアクセシビリティを確保することをおすすめします。 フォームを開き、tab キーで移動してみます。 現在アクティブなフォーム フィールドが明確か？ どのフォーム項目がアクティブかをユーザーが把握できるように フォーカスインジケーターを使用できます

こちらからお試しください。 tab キーを使用して入力に移動します。 入力が有効な場合、枠線は表示されますか？ これがフォーカス インジケーターです。 フォーカス インジケーターを追加するには、 :focus CSS 疑似クラス。

input:focus {
  outline: 4px solid #222;
}

詳細: アクセスしやすいフォーカス インジケーターの設計をご覧ください。

フォームのナビゲーションをサポートする

ユーザビリティとユーザー補助のもう一つの優れたテストは、論理タブ順序が視覚的なタブ順序に沿うようにすることです。 タブ順序をテストする方法 Tab キーを押してフォーム全体を最後まで移動させます。 不適切なナビゲーション ジャンプはありましたか？ DOM の順序が視覚的な順序と一致していることを確認します。

詳しくは、 ページ上での表示順序が DOM の順序に沿うようにする。

タッチデバイスでユーザーがフォームに入力できるようにする

これでフォームがキーボードで動作することを確認しました。 では、この API がスマートフォンなどのタッチデバイスでも動作することを確認する方法を見ていきましょう。

タッチデバイスでフォームを開きます すべての項目に記入してフォームを送信します。 フォーム コントロールを選択するために、何度もタップする必要がありましたか。 タップ領域が小さすぎる可能性があります。 必ず、 ボタンのタップ ターゲット サイズが 48 ピクセル以上。 また、各 <input> と <select> がタップ可能な大きさであることを確認します。 また、フォーム コントロールの間隔を十分に空けて、タッチデバイスでフォーム内を移動しやすくすることもできます。

ユーザーに最適化されたキーボードが表示されるようにする

これまでのモジュールでは、別の画面キーボードを有効にする方法を学習しました。 type 属性または inputmode 属性を使用します。

オープン デモ をタップし、電話番号フィールドをタップします。 画面キーボードにはデフォルトで数字が表示されますが、 その他の文字と一緒に使用できます。 type="tel" を使用すると、電話番号の入力用に最適化された画面キーボードを使用できます。

スマートフォンを使用して実際に試す 電話番号の入力に必要なすべての文字を簡単に入力できるかどうかを試します。 別の type で画面キーボードがどのように動作するのか知りたい場合は、デモの type="email" をお試しください。

フォームのボタンが非表示になっていないことを確認する

長文フォームに入力したとします 送信する準備が整いました[送信] ボタンはどこにあるのでしょうか。 画面下部にあるブラウザ ツールバーの裏側にある場合もあります。 ボタンが表示されるようにする 1 つの方法は、env() CSS 関数を使用することです。 手順 デバイスのユーザー インターフェースによってボタンが隠れないようにする。

フォームがさまざまなプラットフォームで機能することを確認する

できるだけ多くのデバイスでフォームをテストします。 古いノートパソコンをお持ちですか？デフォルトのブラウザを開いてフォームをテストします。 友だちはタブレットを持っていますか？これを借りて、そこでもフォームをテストします。

ブラウザによってスタイルが変わりますか？ お客様のデータを プラットフォーム間で機能するスタイルで詳しく説明します。

BrowserStack はオープンソース プロジェクト用の無料のテスト アカウントを提供します。 Browserling では、さまざまなブラウザでテストできる無料トライアルを提供しています。 OS を問わず 提供します

さまざまな状況でユーザーがフォームに入力できるようにする

ユーザーは、単にさまざまなブラウザ、デバイス、オペレーティング システムを使用しているわけではありません。 フォームの使用場面もさまざまです。 実際に試して、外は今、晴れていますか？スマートフォンを持って外に出る。 明るい場所でフォームを使用すると、コントラスト比を使用できるかどうかをテストできます。

詳細: 色とコントラストのユーザー補助。

接続が不安定な環境でもフォームが機能することを確認する

たとえば、電車でどこかに旅行する場合、 スマートフォンでウェブページを開きます。 ウェブサイトの読み込みには、どうしてこんなに時間がかかるのでしょう？

Cloud Shell を使用して、低速な接続やさまざまなネットワーク タイプのシミュレートを WebPageTest または DevTools。

詳細: 低帯域幅と高レイテンシでのテストを行います。

ユーザーが外出中にフォームを使用できるようにする

予約した場所に向かって歩いているところを想像してみてください。 突然電話が鳴って、電話に出ると同時に、 開始した申請フォームに記入するよう、保険会社からアラートが届きます。 歩きながら話しながらフォームを開き、記入しようとしました。

フォームはさまざまな場面で使われることでしょう。 ストレスの多い状況で、他のことをしているとき、外出先で。 使いやすいフォームにして、ユーザーをサポートしましょう。

フォームに記入する時間の上限を設定してみましょう。 不完全な条件をシミュレートして、フォームをテストします。

テスト結果を共有する

すべてのテストを文書化し、結果をチームと共有する。 これはアクションアイテムに優先順位を付け チーム全員が最も重要なタスクを認識できるようにします。

詳細: テスト結果の共有をご覧ください。

理解度をチェックする

クロス プラットフォーム テストに関する知識をテストする

リソース

• WebPageTest: ウェブサイトのパフォーマンスと最適化のテスト
• 低帯域幅と高レイテンシでのテスト
• テスト結果の共有