フォームは、ユーザーがフィールドまたはフィールドのグループにデータを入力できる要素です。フォームは、単一のフィールドのようなシンプルなものから、ページごとに複数のフィールド、入力検証、場合によっては CAPTCHA を含む複数ステップのフォーム要素のような複雑なものまで、さまざまなものがあります。
フォームは、これまで説明してきたすべての要素の知識と、フォームに固有の追加ルールを必要とするため、ユーザー補助の観点から正しく作成するのが最も難しい要素の一つと見なされています。理解と時間をかけて、ユーザーに適したユーザー補助対応フォームを作成できます。
フォームは、このコースのコンポーネント固有の最後のモジュールです。このモジュールではフォーム固有のガイドラインに焦点を当てますが、コンテンツ構造、キーボード フォーカス、色のコントラストなど、前回のモジュールで学習した他のガイドラインもフォーム要素に適用されます。
フィールド
フォームの基盤となるのはフィールドです。フィールドは、ユーザーがコンテンツを入力したり選択したりできる、入力要素やラジオボタン要素などの小さなインタラクティブなパターンです。さまざまなフォーム フィールドから選択できます。
デフォルトでは、フィールドの状態、プロパティ、値などの特定の機能は HTML 要素に固有に組み込まれているため、ARIA でカスタム オブジェクトを作成するのではなく、確立された HTML パターンを使用することをおすすめします。カスタム フィールドの場合は、ARIA を手動で追加する必要があります。
非推奨 - ARIA を使用したカスタム HTML
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
推奨 - 標準の HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
最もアクセスしやすいフォーム フィールド パターンを選択するだけでなく、該当する場合は、フィールドに HTML 自動入力属性も追加する必要があります。自動入力属性を追加すると、ユーザー エージェントと支援技術（AT）に対してよりきめ細かい目的の定義または識別が可能になります。
予測入力属性を使用すると、ユーザーは視覚的なプレゼンテーションをカスタマイズできます。たとえば、誕生日の予測入力属性（bday）が割り当てられたフィールドに誕生日ケーキのアイコンを表示できます。より一般的には、autocomplete 属性を使用すると、フォームへの入力が簡単かつ迅速になります。これは、認知障がいや読書障がいのある方や、スクリーン リーダーなどの 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>
また、郵送先住所などの関連するフォーム フィールドは、プログラムと視覚的にグループ化する必要があります。1 つの方法は、fieldset と凡例のパターンを使用して、類似する要素をグループ化することです。
説明文
フィールドの説明は、フィールドと要件のコンテキストをより詳しく示すために使用されるという点で、ラベルと目的が似ています。ラベルやフォームの手順が十分に説明されている場合は、フィールドの説明はユーザー補助のために必要ありません。
ただし、パスワード フィールドの入力の最小長に関する情報を伝えたり、使用するカレンダー形式（MM-DD-YYYY など）をユーザーに伝えたりするなど、フォームのエラーを回避するために追加情報を追加することが有用な場合があります。
フォームにフィールドの説明を追加するには、さまざまな方法があります。最も適切な方法の一つは、<label> 要素に加えて、フォーム要素に aria-describedby 属性を追加することです。スクリーン リーダーは、説明とラベルの両方を読み上げます。
要素に aria-labelledby 属性を追加すると、属性値が <label> 内のテキストをオーバーライドします。いつものように、サポートするすべての AT で最終的なコードをテストしてください。
エラー
ユーザーがフォームでエラーを起こさないようにするには、さまざまな方法があります。このモジュールの前半では、フィールドを明確にマークアップすること、識別ラベルを作成する方法、可能な限り詳細な説明を追加することについて説明しました。フォームがどれほど明確に記述されていると思っていても、最終的にはユーザーがミスを犯します。
ユーザーがフォームのエラーに遭遇した場合、最初のステップはエラーを通知することです。エラーが発生したフィールドを明確に特定し、エラー自体をテキストでユーザーに説明する必要があります。
エラー メッセージを表示する方法はいくつかあります。
- エラーが発生した場所の近くに表示されるモーダル
- エラーのコレクションが 1 つの大きなメッセージにグループ化され、ページの上部に表示される
エラーを通知する際は、キーボードのフォーカスと ARIA ライブリージョン オプションに注意してください。
可能であれば、エラーを修正する方法について詳細な提案をユーザーに提供します。エラーをユーザーに通知するには、次の 2 つの属性を使用できます。
- HTML の required 属性を使用できます。ブラウザは、フィールドの検証パラメータに基づいて一般的なエラー メッセージを提供します。
- または、aria-required 属性を使用して、カスタマイズしたエラー メッセージを AT と共有することもできます。すべてのユーザーにメッセージを表示するようにコードを追加しない限り、AT のみがメッセージを受け取ります。
すべてのエラーが解決されたと思われたら、フォームを再送信して、送信結果に関するフィードバックを提供するようお客様に伝えます。エラー メッセージは、更新が必要な項目があることをユーザーに伝えます。成功メッセージは、すべてのエラーが解決され、フォームが正常に送信されたことを確認します。
その他の成功基準
WCAG 2.2 では、よりアクセスしやすいフォーム エクスペリエンスに焦点を当てた次の成功基準が導入されました。
理解度を確認する
ユーザー補助対応フォームに関する知識をテストする
次のうち、最もユーザー補助に対応しているフォーム入力はどれですか。
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>