デザインの基本

最初のセクションでは、基本的なフォームの作成方法を学習しました。 このセクションでは、ベスト プラクティスについて説明します。 このモジュールでは、ユーザー エクスペリエンス(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> 要素を使用する。
placeholder 属性を使用する。
<description> 要素を使用する。

タップ ターゲットの推奨サイズは次のうちどれですか。

48px
31.5 ピクセル
ジャガイモでタップできるほどの大きさです。
16px

エラー メッセージの配置先

いつでもどこでも。
<form> の上部。
エラー メッセージを表示しない。
フォーム コントロールの横

リソース