最初のセクションでは、基本的なフォームの作成方法を学習しました。 このセクションでは、ベスト プラクティスについて説明します。 このモジュールでは、ユーザー エクスペリエンス（UX） 適切に実装されたユーザー インターフェース（UI）が大きな違いを生む理由についても学びました。
ユーザー フレンドリーなインターフェースの作成
フォームへの入力は手間と時間のかかる作業です。 必ずしもそうである必要はありません。 優れた UX を保証するには、UI が直感的であることを確認してください。 最適なフォーム構造とグラフィック デザイン（レイアウト、間隔、フォントのサイズと色）を提供するようにします。 （ラベルの文言や適切な入力タイプなど）。 フォームを改善して使いやすくする方法を見てみましょう。
ラベル
<label> 要素の用途を覚えていますか？
ラベルはフォーム コントロールを説明するものです。
わかりやすいラベルが付いていると、ユーザーがフォーム コントロールの目的を理解しやすくなります。
すべてのフォーム コントロールにラベルを使用する
フォームに新しいフォーム コントロールを追加しますか？ まず、新しいフィールドのラベルを追加します。 そうすることで、忘れずに追加することができます。
最初にラベルを追加すると、フォームの目的（ここではどのようなデータが必要か）に集中しやすくなります。 この点が明確になったら、ユーザーによるデータ入力とフォームの記入をサポートすることに集中します。
ラベルの文言
たとえば、メール フィールドの説明を取得するとします。これは次のように行います。
<label for="email">Enter your email address</label>
または、次のように記述できます。
<label for="email">Email address</label>
どの説明文を選択しますか？
この例では「メールアドレス」推奨されます。 短いラベルの方がスキャンしやすいため 見た目がすっきりします どのようなデータが必要かをユーザーが迅速に把握できるようになります。
ラベルの位置
CSS では、 フォーム コントロールの上部、下部、左側、右側にラベルを配置できます。 どこに置きますか。
調査番組 ベストプラクティスは フォーム コントロールの上にラベルを配置します。 これにより、ユーザーはフォームをすばやくスキャンして、どのラベルがどのフォーム コントロールに属しているかを確認できます。
フォームのデザイン
優れたフォームの設計では
フォームの放棄率を大幅に削減できます。
適切な要素と入力タイプを使用して、ユーザーがデータを入力するのをサポートする
さまざまな
フォーム要素と入力タイプから選択できます。
最適な UX を提供するには、ユースケースに最適な要素と入力タイプを使用します。
複数行のテキストを入力する必要がある場合は、<textarea> 要素を使用します。
サイトの利用規約に同意する必要がある場合は、<input type="checkbox"> を使用します。
また、フォーム コントロールの種類を視覚的に区別することも重要です。 ボタンはボタンの形をしています。 入力のような入力。 フォーム コントロールの目的をユーザーが簡単に認識できるようにします。 たとえば リンクのようなものをクリックすれば 新しいページが開き フォームの送信は行いません。
フォームの操作をサポートする
派手なレイアウトは面白くても、フォームの記入の妨げになることがあります。
特に 研究番組 1 つの列のみを使用するのが 最適であることがわかります ユーザーは、次のフォーム コントロールがある場所を検索することに時間を費やしたくありません。 1 つの列を使用することで、進行方向は 1 つしかなくなります。
フォームの操作をサポートする
意図しないタップやクリックを避けるため
ユーザーがフォームを操作しやすくなるように、ボタンは十分な大きさにします。
推奨される
ボタンのタップ ターゲット サイズは 48 ピクセル以上。
また、margin を使用してフォーム コントロールの間に十分なスペースを追加する必要もあります。
誤って操作しないようにするため、CSS プロパティを実装する必要があります。
フォーム コントロールのデフォルト サイズは小さすぎて使いにくい。padding を使用し、デフォルトの font-size を変更して、サイズを大きくする必要があります。
ポインティング デバイスごとに異なるサイズを定義できます。
CSS メディア機能 pointer を使用したマウスなど。
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
詳しくは、
pointer CSS メディア機能:
発生したエラーを表示
注意が必要なフォーム コントロールをユーザーが簡単に見つけられるようにするため、 参照するフォーム コントロールの横にエラー メッセージを表示します。 フォーム送信時のエラーを表示する際は、必ず最初の無効なフォーム コントロールに移動するようにしてください。
入力するデータを明確にする
ユーザーが有効なデータの入力方法を理解できるようにしてください。 パスワードには 8 文字以上の入力が必要ですか？伝える。
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
どの項目が必須かをユーザーに明確にする
<label for="name">Name (required)</label>
<input name="name" id="name" required>
フィールドが必須の場合は、それを明確にします。「Anatomy of Accessible Forms」では、API 呼び出しの代替手段について説明しています。 必須項目です。フォームのほとんどの項目が必須である場合は、 オプションのフィールドを示します。
エラー メッセージをフォームのコントロールと関連付けて、スクリーン リーダーがアクセスできるようにするには、どうすればよいでしょうか。 これについては、次のモジュールで学習できます。
理解度をチェックする
フォームのデザインに関する知識をテストする
フォーム コントロールについて説明してください。
<description> 要素を使用する。<label> 要素を使用する。description 属性を使用する。placeholder 属性を使用する。タップ ターゲットの推奨サイズは次のうちどれですか。
エラー メッセージの配置先
<form> の上部。