この Codelab では、安全でアクセスしやすく、使いやすい登録フォームを作成する方法について説明します。
ステップ 1: 意味のある HTML を使用する
このステップでは、フォーム要素を使用して組み込みのブラウザ機能を最大限に活用する方法を学びます。
- [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
index.html
でフォームの HTML を確認します。名前、メールアドレス、パスワードが
入力されていますそれぞれがセクションに含まれ、それぞれにラベルが付いています。[Sign up] ボタンは <button>
です。
これらすべての要素の特殊能力については、この Codelab で後ほど説明します。
<form action="#" method="post">
<h1>Sign up</h1>
<section>
<label>Full name</label>
<input>
</section>
<section>
<label>Email</label>
<input>
</section>
<section>
<label>Password</label>
<input>
</section>
<button id="sign-up">Sign up</button>
</form>
[View App] をクリックして登録フォームをプレビューします。ここでは、デフォルトのブラウザ スタイル以外の CSS を使用しないフォームを示しています。
- デフォルトのスタイルは問題ないか?フォームの外観を改善するには、何を変更すればよいですか。
- デフォルトのスタイルは機能しますか?フォームをそのまま使用すると、どのような問題が発生する可能性がありますか?モバイルではどうでしょうかスクリーン リーダーなどの支援技術についてはどうですか?
- どのようなユーザーがどのようなユーザーで、どのようなデバイスやブラウザをターゲットとしていますか?
フォームをテストする
多くのハードウェアを入手してデバイスラボをセットアップすることもできますが、さまざまなブラウザ、プラットフォーム、デバイスでフォームを低コストで簡単に試すことができます。
- Chrome DevTools Device Mode を使用して、モバイル デバイスをシミュレートします。
- パソコンからスマートフォンに URL を送信します。
- BrowserStack などのサービスを使用して、さまざまなデバイスやブラウザでテストします。
- Chrome 拡張機能の ChromeVox などのスクリーン リーダー ツールを使用して、フォームの内容を試してみてください。
[View App] をクリックして登録フォームをプレビューします。
- Chrome DevTools のデバイスモードを使用して、さまざまなデバイスでフォームをテストします。
- スマートフォンまたは他の実際のデバイスでフォームを開いてください。どのような違いが見られますか?
ステップ 2: CSS を追加してフォームの利便性を高める
[View Source] をクリックしてソースコードに戻ります。
ここまでは HTML に問題はありませんが、モバイルとパソコンのさまざまなユーザーに対してフォームが適切に表示されることを確認する必要があります。
このステップでは、CSS を追加してフォームを使いやすくします。
次の CSS をすべてコピーして css/main.css
ファイルに貼り付けます。
[View App] をクリックすると、スタイル設定された登録フォームが表示されます。[View Source] をクリックして css/main.css
に戻ります。
この CSS はさまざまなブラウザや画面サイズで機能しますか?
テストデバイスに合わせて
padding
、margin
、font-size
を調整してみてください。CSS はモバイルファーストです。メディアクエリは、幅が
400px
以上のビューポートと、500px
以上の幅のビューポートに CSS ルールを適用するために使用されます。これらのブレークポイントは適切ですか?フォームのブレークポイントをどのように選択すればよいですか。
ステップ 3: 属性を追加してユーザーがデータを入力できるようにする
このステップでは、入力要素に属性を追加して、ブラウザでフォームのフィールドの値を保存し、自動入力できるようにします。また、フィールドのデータが不足しているか無効である場合に警告を表示できるようにします。
フォームコードは次のようになります。index.html
<form action="#" method="post">
<h1>Sign up</h1>
<section>
<label for="name">Full name</label>
<input id="name" name="name" autocomplete="name"
pattern="[\p{L}\.\- ]+" required>
</section>
<section>
<label for="email">Email</label>
<input id="email" name="email" autocomplete="username"
type="email" required>
</section>
<section>
<label for="password">Password</label>
<input id="password" name="password" autocomplete="new-password"
type="password" minlength="8" required>
</section>
<button id="sign-up">Sign up</button>
</form>
type
の値にはさまざまな用途があります。* type="password"
: 入力時にテキストを隠し、ブラウザのパスワード マネージャーが安全なパスワードを提案できるようにします。
* type="email"
では基本的な検証を行い、モバイル ユーザーに適切なキーボードが表示されるようにします。ぜひお試しください。
[View App] をクリックし、[Email] ラベルをクリックします。どうなるでしょうか。ラベルにメール入力の id
と一致する for
値があるため、フォーカスはメール入力に移動します。他のラベルと入力も同じように機能します。また、ラベル(またはラベルに関連付けられた入力)がフォーカスされると、スクリーン リーダーはラベルテキストを読み上げます。ChromeVox 拡張機能を使用してお試しいただけます。
フィールドを空にしてフォームを送信してみてください。ブラウザはフォームを送信せず、不足しているデータの入力を求め、フォーカスを設定します。これは、すべての入力に require
属性を追加しているためです。では、パスワードを 8 文字未満にして送信してみてください。ブラウザはパスワードが十分でないことを警告し、minlength="8"
属性があるためにパスワード入力にフォーカスを設定します。pattern
(名前の入力に使用)や他の検証制約についても同様です。ブラウザは、追加のコードを必要とせずに、これらすべてを自動的に行います。
[Full name] 入力に autocomplete
値 name
を使用することは理にかなっていますが、他の入力についてはどうでしょうか。
* [メール] に autocomplete="username"
を指定すると、ブラウザのパスワード マネージャーが、このユーザー名(ユーザー名)の「名前」としてメールアドレスを保存し、パスワードと一緒に使用することを意味します。* パスワードの autocomplete="new-password"
は、現在のサイトのパスワードとしてこの値を保存するかどうかを求めるパスワード マネージャーへのヒントです。その後、autocomplete="current-password"
を使用して、ログイン フォームの自動入力を有効にできます(これはsign-upフォームです)。
ステップ 4: ユーザーが安全なパスワードを入力できるようにする
フォームをそのまま使用して、パスワードの入力に問題はありましたか。
問題は 2 つあります。 * パスワードの値に制約があるかどうかを確認する方法がない。 * パスワードが正しいことを確認するためのパスワードが表示されません。
ユーザーに推測させないでください。
index.html
のパスワード セクションを次のコードで更新します。
<section>
<label for="password">Password</label>
<button id="toggle-password" type="button" aria-label="Show password as plain text.
Warning: this will display your password on the screen.">Show password</button>
<input id="password" name="password" type="password" autocomplete="new-password"
minlength="8" aria-describedby="password-constraints" required>
<div id="password-constraints">Eight or more characters.</div>
</section>
これにより、パスワード入力に役立つ新機能が追加されます。
- パスワードの表示を切り替えるボタン(実際にはテキストのみ)。(ボタン機能は JavaScript で追加されます)。
- パスワード切り替えボタンの
aria-label
属性。 - パスワード入力の
aria-describedby
属性。スクリーン リーダーは、ラベルテキスト、入力タイプ(パスワード)、説明の順を読み上げます。
パスワードの切り替えボタンを有効にして、パスワードの制約に関する情報をユーザーに表示するには、以下の JavaScript をすべてコピーして、独自の js/main.js
ファイルに貼り付けます。
(CSS はステップ 2 ですでに設定されています。パスワード切り替えボタンのスタイルや配置をご確認ください)。
パスワードの表示を切り替えるには、テキストよりもアイコンを使用したほうがよいですか?少人数の友人や同僚で割引ユーザビリティ テストを試してください。
フォームでスクリーン リーダーがどのように動作するかを確認するには、ChromeVox 拡張機能をインストールし、フォームの操作を行ってください。 ChromeVox のみでフォームにご記入いただくことは可能でしょうか。そうでない場合、何を変えますか。
この時点で、フォームは次のようになります。
さらに先へ
この Codelab では、以下の重要な機能については説明しません。
不正使用されたパスワードを確認しています。不正使用されたパスワードは決して許可しないでください。 パスワード チェック サービスを使用して、不正使用されたパスワードを検出できます(使用を推奨します)。 既存のサービスを使用することも、独自のサーバーで自分で実行することもできます。実際に試して、フォームにパスワード チェックを追加します。
利用規約とプライバシー ポリシーのドキュメントへのリンク: ユーザーのデータの保護方法を明示します。
スタイルとブランディング: サイトの他の部分と調和するスタイルにします。ユーザーが名前と住所を入力して支払いをするときは、その場にいるという安心感を持って行う必要があります。
分析と実際のユーザーのモニタリング: フォーム設計のパフォーマンスとユーザビリティを、実際のユーザーがテストしてモニタリングできるようにします。