JavaScript

JavaScript を使用すると、フォームでのユーザー操作への対応、追加のフォーム フィールドの表示、フォームの送信などを行うことができます。

アンケート フォームを作成したとします。ユーザーが 1 つのオプションを選択した後、追加の <input> を表示して、選択に関連する特定の質問をします。関連する <input> 要素のみを表示するにはどうすればよいですか?

JavaScript を使用して <input> を表示できるのは、関連する <input type="radio"> が現在選択されている場合のみです。

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

デモの JavaScript コードを見てみましょう。aria-controls 属性と aria-expanded 属性に気付きましたか?以下の ARIA 属性を使用すると、スクリーン リーダーのユーザーが追加のフォーム コントロールの表示と非表示を把握しやすくなります。

ユーザーがページを離れずにフォームを送信できるようにする

コメント フォームがあるとします。読者がコメントを追加してフォームを送信したときに、ページを更新せずにコメントをすぐに確認できるようにするのが理想的です。

これを実現するには、onsubmit イベントをリッスンし、event.preventDefault() を使用してデフォルトの動作を防ぎ、Fetch API を使用して FormData を送信します。

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

バックエンド スクリプトでは、POST リクエストがブラウザ(フォーム要素の action 属性、method="post")からのものか、JavaScript(fetch() リクエストなど)からのものかをチェックできます。

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

動的コンテンツの変更については、常にスクリーン リーダーのユーザーに通知します。aria-live="polite" 属性を持つ要素を HTML に追加し、変更後に要素のコンテンツを更新します。たとえば、ユーザーがコメントを送信した後に、テキストを「コメントは正常に投稿されました」に更新します。

詳しくは、ARIA ライブ領域をご覧ください。

JavaScript による検証

エラー メッセージがサイトのスタイルとトーンに合っていることを確認する

デフォルトのエラー メッセージの文言はブラウザによって異なります。すべてのユーザーに同じメッセージが表示され、そのメッセージがサイトのスタイルとトーンに合致するようにするにはどうすればよいですか?独自のエラー メッセージを定義するには、Constraint Validation APIsetCustomValidity() メソッドを使用します。

エラーをリアルタイムでユーザーに通知する

フォーム検証用の HTML の組み込み機能は、データがバックエンドに送信される前に、無効なフォーム フィールドについてユーザーに通知するのに適しています。フォーム フィールドから離れた直後にユーザーに通知できたら便利だと思いませんか?

要素がフォーカスを失ったときに発生する blur イベントをリッスンし、ValidityState インターフェースを使用してフォーム コントロールが無効かどうかを検出します。

入力したパスワードをユーザーが確認できるようにする

<input type="password"> に入力されたテキストは、ユーザーのプライバシーを尊重するため、デフォルトで非表示になります。<button> を表示して入力したテキストの表示と非表示を切り替え、ユーザーがパスワードを入力できるようにします。

デモをお試しください。[パスワードを表示] <button> を使用して、入力したテキストの表示 / 非表示を切り替えます。このプログラムの仕組みを見てみましょう。[パスワードを表示] をクリックすると、パスワード フィールドの type 属性が type="password" から type="text" に変更され、<button> テキストが「パスワードを非表示にする」に変更されます。

[パスワードを表示] ボタンにアクセスできるようにすることが重要です。aria-controls 属性を使用して、<button><input type="password"> に接続します。

スクリーン リーダーのユーザーに、パスワードが現在表示されているか非表示になっているかを通知するには、aria-live="polite" で非表示要素を使用し、それに応じてテキストを変更します。スクリーン リーダーを使用するユーザーが、パスワードが表示され、画面を見ている他のユーザーに表示されていることを把握できるようにすることが重要です。

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

詳しくは、パスワードを表示するオプションの実装をご覧ください。

リソース