「アクセシブルな申込フォームを作る」は、HTML フォーム、CSS、JavaScript の基礎を知っている方のためのフロントエンド実践プロジェクトです。小さな手作り工房の申込ページを作り、訪問者が開催回を選び、キーボードでフォームを入力し、実際のサーバーから申込確認を受け取れるようにします。
ガイド付きラボでは、まず動作する見本をキーボードで使い、その後、フォームのレイアウト、状態のフィードバック、非同期送信を作ります。独立したチャレンジでは、別の開催回と入力項目の関係に同じ手法を応用します。各ラボには、それぞれ独立したファイルとデータが用意されています。
学習内容
このコースを修了すると、次のことができるようになります。
- 表示されるラベル、入力説明、入力制約、エラーメッセージを関連付け、何を入力し、どう問題を直せばよいか分かるようにする。
- 読む順序が明確で、キーボードフォーカスが見え、色だけに頼らず状態を伝えるレスポンシブなフォームを作る。
fetchとasync/awaitでデータを送信し、リクエストの応答待ちを表示して、待機中に送信操作を繰り返さないようにする。- 申込みが受理された後にだけサーバー発行の確認 ID を表示し、入力項目の拒否、満席の開催回、一時的なサービス障害を区別する。
- 拒否や失敗の後も入力済み情報を保持し、練習した一時的な障害から復旧し、既存の申込記録を保つ。
このコースの対象者
このコースは、個別の Web 演習を組み合わせて、一通り使えるワークショップの申込体験を作りたい方を対象としています。
前提知識： HTML フォームと CSS レイアウトの基礎、JavaScript のオブジェクト、関数、イベントを知っている必要があります。基本的な DOM 要素の選択も理解している必要があります。プロジェクトファイルを開いて保存できることも前提です。必要なフォームのセマンティクス、検証、非同期コード、HTTP レスポンス、状態管理は、チャレンジの前にガイド付きラボで説明します。React の知識は不要です。
学習環境： LabEx が、ブラウザで使える準備済みの開発環境、Web ページのプレビュー、動作するローカル API とデータベースを提供します。練習用の人物情報や連絡先は架空のデータです。編集するのはフロントエンドです。Web サイトのラベルと実行時の出力は英語のままです。
よくある質問
コードは自分で書きますか？
はい。用意されたプロジェクトで HTML、CSS、JavaScript を完成させ、キーボード入力、送信、拒否、失敗後の復旧など、実際のブラウザ操作でフォームを使います。
バックエンドやそのセキュリティ制御も作りますか？
いいえ。API とデータベースは用意されています。フロントエンドが、サーバーに実際に受理された結果を正しく反映するようにします。ブラウザの検証や送信ボタンの無効化は、バックエンドのセキュリティを実装したり、本番環境での同時アクセスの安全性を保証したりするものではありません。
コースを修了するとアクセシビリティの認証を取得できますか？
いいえ。ラベル、キーボード、フォーカス、フィードバックに関する具体的な動作を練習します。完全なアクセシビリティ評価では、これらの演習以外にも多くの項目を確認する必要があります。
