フォームは、ユーザーがフィールドまたはグループにデータを提供するための要素 表示されます。フォームは 1 つのフィールドだけの簡単なものから、1 つのフィールドだけの複雑なものまで、さまざまです。 ページごとの複数のフィールド、入力検証、 CAPTCHA が必要になることもあります。
フォームは、非常に困難な要素の一つと考えられています。 すべての要素に関する知識が求められるため、 フォーム専用のルールもあります一部の 自分のニーズに合った 使いやすいフォームを作成できます できます。
フォームは、このコースの最後のコンポーネント固有のモジュールです。このモジュールでは フォーム固有のガイドラインに 焦点を当てますが 詳しく学びました。たとえば、 コンテンツ構造 キーボード フォーカス 色のコントラスト、フォームにも適用 あります。
フィールド
フォームのバックボーンとなるのがフィールドです。フィールドは、次のような、小さなインタラクティブ パターンです。 ユーザーがコンテンツを入力したり、会話を あります。さまざまなフォーム フィールドがあるので、 選択できます。
デフォルトでは、HTML パターンではなく、確立された HTML パターンを使用することをおすすめします。 ARIA を使用してカスタムなものを作成する 機能（フィールドの状態、プロパティ、値など）は本質的に、 が HTML 要素に組み込まれていますが、カスタムの ARIA は手動で追加する必要があります。
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
最も利用しやすいフォーム フィールドのパターンを選択できるほか、 スペースがある場合は HTML 予測入力属性 追加できます予測入力の属性を追加すると、よりきめ細かい 目的の定義または特定 ユーザーエージェントと支援技術（AT）が 含まれます
予測入力属性を使用すると、ユーザーは視覚的なプレゼンテーションをパーソナライズできます。
誕生日の予測入力を使用してフィールドにバースデー ケーキのアイコンを表示するなど
属性（bday）が割り当てられています。より一般的には、予測入力属性によって、
フォームに入力する手間を省くことができます。これは特に
認知機能障がいや読字障害を持つ人、およびスクリーン
できます。
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
最後に、フォームのフィールドは、受け取ったときにコンテキストに応じた変更を生成しないようにする必要があります。 ユーザーが事前にその動作について警告を受けていない場合は、 コンポーネントを使用しますたとえば、フォームが自動的に送信されてはいけません フィールドがフォーカスを受け取ったとき、またはユーザーがフィールドにコンテンツを追加したとき。
ラベル
ラベルは、フィールドの目的をユーザーに知らせるものです。そのフィールドが必須の場合は、 また、入力フィールドや入力フィールド、 使用できます。ラベルが常に表示され、フォームを正確に説明している必要があります ユーザーに提供されます。
アクセシビリティの高い形式の基本原則の一つは、 フィールドとラベルの間の正確なつながりこれは視覚的にも 必要があります。このコンテキストがないと、ユーザーは フォームの各項目に入力します。
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
また、送付先住所などの関連するフォーム項目は、 視覚的にグループ化できます一つの方法として、フィールドセットや凡例を使用して 類似の要素をグループ化できます。
説明文
フィールドの説明は、次の目的で使用されるという点でラベルに似ています。 その分野と要件を詳しく説明します。フィールドの説明は ラベルやフォームの説明がわかりやすい場合は、アクセシビリティのために必要 十分です
ただし、情報を追加すると便利な場合もあります メッセージの最小文字数に関する情報を送信するなど、フォームのエラーを パスワード欄に入力する、使用するカレンダー形式（ MM-DD-YYYY の形式で表されます）。
フィールドにフィールドの説明を追加するには、さまざまな方法があります。
フォームです。最善の方法の一つは、
aria-describedby
属性を <label> 要素に加えて、フォーム要素にも追加する必要があります。画面
説明とラベルの両方が読み取られます。
URL に
aria-labelledby
属性を追加すると、その属性値は
<label>。いつものように、作成したすべての AT で最終的なコードをテストしてください。
サポートプランです
エラー
アクセシビリティの高いフォームを作成する際は、 フォームエラーの原因となるこのモジュールで前述したように、Terraform で記述された 識別ラベルの作成、詳細な説明の追加が可能です。 考えていますどんなにわかりやすいフォームでも 誤りが生じます
フォームエラーが発生した場合の最初のステップは エラーを知らせます。 エラーが発生したフィールドを明確に特定し、 テキストでユーザーに説明する必要があります。
エラー メッセージを表示する方法は 次のようなメッセージが表示されます。
- エラーが発生した場所の近くにインライン表示されるポップアップ モーダル
- エラーのコレクションがページ上部に表示される 1 つの大きなメッセージにグループ化されている
キーボードのフォーカスを意識する および ARIA ライブ リージョン オプション エラーを通知する際に使用されます。
可能な限り、問題を解決するための詳細な提案をお客様に提供します。 エラーが発生します。ユーザーにエラーを通知するには、2 つの属性を使用できます。
- HTML の required 属性を使用できます。ブラウザでは、指定された検証パラメータに基づいて一般的なエラー メッセージが表示されます。
- または、aria-required 属性を使用して、カスタマイズしたエラー メッセージを AT と共有することもできます。メッセージをすべてのユーザーに表示するためのコードを追加しない限り、AT にのみメッセージが届きます。
すべてのエラーが解決したとお客様が思ったら、再送信してもらう フォームを確認し、送信結果に関するフィードバックを提供します。エラー 追加の更新が必要であることをユーザーに通知し、成功のメッセージは すべてのエラーを解決してフォームが正常に送信されたことを確認します。
理解度をチェックする
アクセシビリティの高いフォームに関する知識をテストする
次の回答のうち、最もアクセスしやすいフォーム入力はどれですか？
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>