フォームは、ユーザーがフィールドまたはフィールドのグループにデータを入力できるようにする要素です。フォームは、単一のフィールドにすることも、ページごとに複数のフィールド、入力検証、CAPTCHA を含む複雑な複数ステップのフォームにすることもできます。
フォームは、アクセシビリティの観点から最も難しい要素の 1 つとされています。フォームには、すでに説明したすべての要素の知識に加えて、フォームに固有の追加ルールも必要となるためです。少しの知識と時間をかければ、自分とユーザーに合ったアクセシビリティの高いフォームを作成できます。
フォームは、このコースの最後のコンポーネント固有のモジュールです。このモジュールではフォーム固有のガイドラインに焦点を当てますが、コンテンツの構造、キーボード フォーカス、色のコントラストなど、前のモジュールで説明したガイドラインもフォーム要素に適用されます。
フィールド
フォームのバックボーンはフィールドです。フィールドは、ユーザーがコンテンツを入力したり選択したりできる、入力要素やラジオボタン要素などの小さなインタラクティブ パターンです。さまざまなフォーム フィールドから選択できます。
デフォルトの推奨事項は、ARIA でカスタムのものを構築するのではなく、確立された HTML パターンを使用することです。これは、フィールドの状態、プロパティ、値などの特定の機能と関数が、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）が割り当てられたフィールドにバースデー ケーキのアイコンを表示するなど、視覚的な表現をカスタマイズできます。一般に、オートコンプリート属性を使用すると、フォームへの入力が簡単かつ迅速になります。この機能は、認知症や読字障害のある方、スクリーン リーダーなどの支援技術を使用している方に特に役立ちます。
<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>
最後に、ユーザーがコンポーネントを使用する前にその動作について警告を受けていない限り、フォーム フィールドはフォーカスを受け取ったりユーザー入力があったりしても、コンテキストの変更を生成してはなりません。たとえば、フィールドにフォーカスが移動したときや、ユーザーがフィールドにコンテンツを追加したときに、フォームが自動的に送信されるべきではありません。
ラベル
ラベルは、フィールドの目的、フィールドが必須かどうかをユーザーに知らせます。また、入力形式などのフィールド要件に関する情報も提供できます。ラベルは常に表示され、ユーザーにフォーム フィールドを正確に説明する必要があります。
アクセシブルなフォームの基本的な原則の 1 つは、フィールドとそのラベルの間に明確で正確な関連付けを確立することです。これは、視覚的にもプログラム的にも当てはまります。このコンテキストがないと、ユーザーはフォームのフィールドにどのように入力すればよいかわからない可能性があります。
<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 と legend のパターンを使用して、類似した要素をグループ化することです。
説明文
フィールドの説明は、フィールドと要件にコンテキストを追加するために使用されるという点で、ラベルと目的が似ています。ラベルやフォームの手順が十分に説明的であれば、ユーザー補助のためにフィールドの説明は必要ありません。
ただし、パスワード フィールドの入力の最小文字数に関する情報を伝えたり、使用するカレンダー形式（MM-DD-YYYY など）をユーザーに伝えたりするなど、フォームエラーを回避するために追加情報を加えることが役立つ場合もあります。
フォームにフィールドの説明を追加する方法は多数あります。最も効果的な方法の 1 つは、<label> 要素に加えて、aria-describedby 属性をフォーム要素に追加することです。スクリーン リーダーは説明とラベルの両方を読み上げます。
要素に aria-labelledby 属性を追加すると、属性値によって <label> 内のテキストがオーバーライドされます。いつものように、サポートするすべての AT で最終コードをテストしてください。
エラー
アクセシビリティの高いフォームを作成する際には、ユーザーがフォームでエラーを起こさないようにするための対策を講じることができます。このモジュールの前半では、フィールドを明確にマークアップし、識別ラベルを作成し、可能な限り詳細な説明を追加する方法について説明しました。フォームがどれほど明確であっても、最終的にはユーザーが間違いを犯す可能性があります。
ユーザーがフォーム エラーに遭遇した場合、最初の手順はエラーを認識させることです。エラーが発生したフィールドを明確に特定し、エラー自体をテキストでユーザーに説明する必要があります。
エラー メッセージの表示には、次のようなさまざまな方法があります。
- エラーが発生した場所の近くに表示されるモーダル、インライン
- ページ上部に表示される 1 つの大きなメッセージにグループ化されたエラーのコレクション
エラーをアナウンスする際は、キーボード フォーカスと ARIA ライブ リージョン オプションに注意してください。
可能な場合は、エラーを修正する方法についてユーザーに詳細な提案を提示します。ユーザーにエラーを通知するために使用できる属性は 2 つあります。
- HTML の required 属性を使用できます。ブラウザは、ファイル検証パラメータに基づいて一般的なエラー メッセージを提供します。
- また、aria-required 属性を使用して、カスタマイズしたエラー メッセージを AT に共有することもできます。このメッセージは、すべてのユーザーに表示するコードを追加しない限り、AT のみに表示されます。
ユーザーがすべてのエラーが解決されたと判断したら、フォームを再送信できるようにし、送信結果に関するフィードバックを提供します。エラー メッセージは、ユーザーに更新が必要な項目があることを知らせます。成功メッセージは、すべてのエラーが解決され、フォームが正常に送信されたことを確認します。
追加の成功基準
WCAG 2.2 では、フォームのアクセシビリティを向上させるための次の成功基準が導入されました。