フォーム イベントに応答する
JavaScript を使うと、フォーム上でのユーザー操作に応答したり、その他のフォーム項目を表示したり、フォームを送信したりなど、さまざまなことができます。
ユーザーがフォームの追加コントロールを入力できるようにする
アンケート フォームを作成するとします。ユーザーが 1 つのオプションを選択した後で、その選択内容に関連する特定の質問をする追加の <input>
を表示する必要があります。関連する <input>
要素のみを表示するにはどうすればよいでしょうか。
JavaScript を使用すると、関連する <input type="radio">
が現在選択されている場合にのみ、<input>
を表示できます。
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
デモ用の JavaScript コードを見てみましょう。aria-controls
属性と aria-expanded
属性に気づきましたか?これらの ARIA 属性を使用すると、追加のフォーム コントロールの表示 / 非表示をスクリーン リーダーのユーザーが把握しやすくなります。
ユーザーがページを離れることなくフォームを送信できるようにする
コメント フォームがあるとします。読者がコメントを追加してフォームを送信したとき、ページを更新しなくてもすぐにコメントを確認できれば理想的です。
そのためには、onsubmit
イベントをリッスンし、event.preventDefault()
を使用してデフォルトの動作を無効にし、Fetch API を使用して FormData
を送信します。
バックエンド スクリプトは、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 API の setCustomValidity()
メソッドを使用して、独自のエラー メッセージを定義します。
ユーザーにリアルタイムでエラーを通知する
フォーム検証用の組み込み HTML 機能は、データがバックエンドに送信される前に、無効なフォーム フィールドについてユーザーに通知する効果があります。ユーザーがフォームの入力欄を離れたらすぐに通知した方がよいと思いませんか?
要素がフォーカスを喪失したときに発生する blur
イベントをリッスンし、ValidityState
インターフェースを使用して、フォーム コントロールが無効かどうかを検出します。
入力したパスワードがユーザーに表示されることを確認する
<input type="password">
に入力したテキストは、ユーザーのプライバシーを尊重するため、デフォルトでは不明瞭化されます。<button>
を表示して、入力したテキストの表示を切り替えて、ユーザーがパスワードを入力しやすくします。
デモをお試しください。[Show Password] <button>
を使用して、入力したテキストの表示を切り替えます。このプログラムの仕組みを見てみましょう。[Show Password] をクリックすると、パスワード フィールドの type
属性を type="password"
から type="text"
に変更し、<button>
のテキストが「Hide Password」に変わります。
[Show Password] ボタンにアクセスできるようにすることが重要です。aria-controls
属性を使用して、<button>
を <input type="password">
と接続します。
パスワードが現在表示されているか非表示になっているかをスクリーン リーダーのユーザーに通知するには、aria-live="polite"
で非表示要素を使用し、それに応じてテキストを変更します。スクリーン リーダーのユーザーが、パスワードの表示や、他の誰かにパスワードが表示されていることを認識できるようにすることが重要です。
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
詳しくは、パスワード表示オプションを実装する方法をご覧ください。