フォームは、ユーザーがフィールドまたはフィールド グループにデータを入力するための要素です。フォームは、1 つのフィールドのような単純なものから、1 ページあたり複数のフィールド、入力の検証、場合によっては CAPTCHA を使用する複数ステップのフォーム要素のような複雑なものまで、さまざまです。
フォームは、ここまでに説明したすべての要素に加え、フォームに固有の追加のルールが必要なため、ユーザー補助の観点から言うと、非常に難しい要素の一つと考えられています。ある程度理解して時間を置けば、自分とユーザーにとって使いやすいフォームを作成できます。
「フォーム」は、このコースで最後のコンポーネント固有のモジュールです。このモジュールではフォーム固有のガイドラインに焦点を当てますが、以前のモジュールで学習したその他のガイドライン（コンテンツ構造、キーボード フォーカス、色のコントラストなど）もすべてフォーム要素に適用されます。
フィールド
フォームの中心となるのはフィールドです。フィールドとは、入力やラジオボタン要素などの小さなインタラクティブなパターンのことで、ユーザーがコンテンツを入力したり、選択したりできるようにします。さまざまなフォーム項目が用意されており、選択できます。
デフォルトでは、ARIA でカスタムするものを作成するのではなく、確立された HTML パターンを使用することをおすすめします。フィールドの状態、プロパティ、値などの特定の機能は本質的に 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）が割り当てられたフィールドに、バースデー ケーキのアイコンを表示できます。より一般的には、オートコンプリート属性を使用すると、フォームにすばやく簡単に入力できます。この機能は、認知障がいや読書障がいのある方や、スクリーン リーダーなどの AT を使用する方に特に役立ちます。
<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 など）をユーザーに伝えるなど、フォームエラーを回避するために追加情報を追加すると役立つ場合があります。
フォームにフィールドの説明を追加する方法は多数あります。最適な方法の一つは、<label> 要素に加えて、フォーム要素に aria-describedby 属性を追加することです。スクリーン リーダーが説明とラベルの両方を読み上げます。
aria-labelledby 属性を要素に追加すると、その属性値は <label> 内のテキストよりも優先されます。通常どおり、サポートする予定のすべての AT で最終的なコードをテストしてください。
エラー
アクセシビリティの高いフォームを作成するときは、ユーザーがフォームのエラーにならないようにするためにできることが多数あります。このモジュールの前半では、フィールドの明確なマークアップ、識別ラベルの作成、可能な場合の詳細な説明の追加について説明しました。しかし、フォームがどれだけ明確であっても、最終的にはユーザーはミスを犯します。
フォームエラーが発生した場合、最初のステップはエラーを通知することです。エラーが発生したフィールドをはっきりと特定し、エラー自体をテキストでユーザーに説明する必要があります。
エラー メッセージを表示するには、次のような方法があります。
- エラーが発生した箇所の近くにインラインに表示されるポップアップ モーダル
- エラーのコレクションが 1 つの大きなメッセージにまとめられてページの上部に表示されます
エラーを通知するときは、キーボード フォーカスと ARIA ライブ リージョン オプションに注意してください。
可能な限り、エラーの修正方法に関する詳細な提案をユーザーに提示してください。ユーザーにエラーを通知する際は、次の 2 つの属性を使用できます。
- HTML の必須属性を使用できます。ブラウザは、指定された検証パラメータに基づいて一般的なエラー メッセージを表示します。
- または、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>