フォームにはさまざまな方法で入力できます。 ユーザーは混雑したバスの中、スクリーン リーダー、古いノートパソコンで、スマートフォンでフォームを使用することがあります。フォームがさまざまなデバイスやさまざまな状況で機能することを確認する方法を見ていきましょう。
フォームがキーボード ユーザー向けに機能することを確認する
フォームにアクセスできることを確認する最初のテストとして、キーボードのみを使用してフォームに入力します。
フォームを開き、tab キーを使用して移動してみます。
どのフォーム項目が現在アクティブになっているかが明確ですか？
どのフォーム項目がアクティブかをユーザーにわかりやすくするために、フォーカス インジケーターを使用できます。
ぜひお試しください。
tab キーを使用して入力に移動します。入力を有効にすると枠線が表示されますか？
それがフォーカス インジケーターです。フォーカス インジケーターを追加するには、CSS 疑似クラス :focus を使用します。
input:focus {
outline: 4px solid #222;
}
詳しくは、アクセス可能なフォーカス インジケーターの設計をご覧ください。
ユーザーがフォームを操作しやすくする
ユーザビリティとアクセシビリティのもう一つの優れたテストは、論理的なタブの順序が視覚的なタブ順序に従うことを確認することです。 タブオーダーのテスト方法 Tab キーを使用して、フォーム全体に移動します。 非論理的なナビゲーション ジャンプに気づきましたか？ DOM の順序が視覚的な順序と一致していることを確認してください。
詳しくは、ページの表示順序を DOM 順序に合わせるをご覧ください。
タッチデバイスでフォームに入力しやすくする
これで、フォームがキーボードで動作することを確認しました。 次は、この機能がスマートフォンなどのタッチデバイスでも機能することを確認する方法を見ていきましょう。
タッチデバイスでフォームを開き、すべての項目を入力してフォームを送信します。フォーム コントロールを選択するために、複数回タップする必要がありましたか。
タップ領域が小さすぎることが問題です。
ボタンのタップ ターゲット サイズを 48 ピクセル以上にし、各 <input> と <select> がタップに十分な大きさであることを確認します。フォーム コントロール間に十分な間隔を空けると、タッチデバイスでフォームを操作しやすくなります。
ユーザーが最適化されたキーボードを使用できるようにする
前のモジュールでは、type 属性または inputmode 属性を使用して別の画面キーボードを有効にする方法を学習しました。
スマートフォンでデモを開き、電話番号フィールドをタップします。画面キーボードにはデフォルトで、電話番号とその他の文字が数字とともに表示されます。type="tel" を使用すると、電話番号の入力用に最適化された画面キーボードを表示できます。
スマートフォンで試して、電話番号の入力に必要なすべての文字を簡単に入力できるか確認してみてください。他の type で画面キーボードがどのように動作するか知りたい場合は、デモの type="email" をお試しください。
フォームのボタンが非表示になっていないことを確認する
長いフォームに記入し
送信する準備ができたら[送信] ボタンはどこにありますか？
画面下部のブラウザのツールバーにある場合もあります。
ボタンを確実に表示するための 1 つの方法は、CSS 関数 env() を使用することです。デバイスのユーザー インターフェースによってボタンが隠されないようにする方法をご覧ください。
フォームがさまざまなプラットフォームで機能することを確認する
できるだけ多くのデバイスでフォームをテストしてみましょう。 古いノートパソコンをお持ちですか？デフォルトのブラウザを開き、フォームをテストします。 友だちがタブレットをお持ちですか？これを借りてフォームをテストします。
ブラウザによってスタイルが一部異なることはありますか？ スタイルをプラットフォーム間で連動させる方法については、この後のモジュールで説明します。
BrowserStack はオープンソース プロジェクト用の無料のテスト アカウントを提供しています。Browserling は、さまざまなブラウザ、デバイス、オペレーティング システムでテストできる無料試用を提供しています。
さまざまな状況でユーザーがフォームに入力できるようにする
ユーザーはブラウザ、デバイス、オペレーティング システムが異なるだけではありません。また、ユーザーはさまざまな状況でフォームを使用します。 実際に試して、現在、外が晴れていますか？スマートフォンを持って出かけます。 フォームを明るい場所で使うと、コントラスト比が使用できるかどうかをテストできます。
詳しくは、色とコントラストのユーザー補助をご覧ください。
接続が不安定な状態でもフォームが機能することを確認する
電車でどこかに旅行したとします。 スマートフォンでウェブページを開きます。 ウェブサイトの読み込みにこんなに時間がかかるのではないかと気になっています Ш。
WebPageTest または DevTools を使用して、低速の接続やさまざまなネットワーク タイプをシミュレートできます。
低帯域幅と高レイテンシでのテストの詳細を確認する。
ユーザーが外出先でもフォームを使用できるようにする
予約に向かって歩いているとします。突然電話が鳴り、電話に出ました。それと同時に、保険会社からアラートが届き、開始した申請フォームに入力するよう求められます。あなたはフォームを開き、歩きながら話しながら入力しようとしています。
フォームは、ユーザーがさまざまな状況で使用されることを忘れないでください。 ストレスの多い状況で、他のことをしながら外出中で。 フォームを使いやすくすることで、ユーザーをサポートできます。
フォームに入力する時間の上限を設定してみましょう。 フォームをテストできる、不完全な状況をシミュレートします。
テスト結果を共有する
すべてのテストを文書化し、結果をチームと共有します。これによりアクション アイテムに優先順位を付け、チームの全員が最も重要なタスクを認識できるようになります。
詳細については、テスト結果の共有をご覧ください。
理解度をチェックする
クロス プラットフォーム テストに関する知識をテストする
キーボード ユーザーのみにフォーカス インジケーターを表示できますか？
:focus-visible を使用します。:focus-detected を使用します。:focus-shown を使用します。リソース
- WebPageTest: ウェブサイトのパフォーマンスと最適化のテスト
- 低帯域幅と高レイテンシでのテスト
- テスト結果の共有