このページは Cloud Translation API によって翻訳されました。

クロスプラットフォームブラウザの機能を使用してログインフォームを作成する

Sam Dutton

この Codelab では、安全でアクセシビリティが高く、使いやすいログインフォームを作成する方法について説明します。

1. 意味のある HTML を使用する

ジョブ用に構築された次の要素を使用します。

<form>
<section>
<label>
<button>

これらの要素を使用すると、ブラウザの組み込み機能が有効になり、ユーザー補助機能が向上し、マークアップに意味が追加されます。

[Remix to edit] をクリックして、プロジェクトを編集可能にします。

<body> 要素に次のコードを追加します。

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

この時点で、index.html ファイルは次のようになります。

[View App] をクリックして、ログインフォームをプレビューします。追加した HTML は有効で正しいのですが、デフォルトのブラウザスタイルが適用されているため、特にモバイルデバイスでは見づらく、使いづらくなっています。
[ソースを表示] をクリックして、ソースコードに戻ります。

2. 指と親指向けに設計

パディング、マージン、フォントサイズを調整して、モバイルで入力が適切に機能するようにします。

次の CSS をコピーして、style.css ファイルに貼り付けます。
[View App] をクリックして、新しくスタイル設定されたログインフォームを表示します。
[View Source] をクリックして、style.css ファイルに戻ります。

かなりの量のコードになりました。主な変更点はサイズです。

padding と margin が入力に追加されます。
font-size はモバイルとパソコンで異なります。

:invalid セレクタは、入力が無効な値を持つ場合に表示するために使用されます。これはまだ機能しません。

CSS レイアウトはモバイルファーストです。

デフォルトの CSS は、幅が 450 ピクセル未満のビューポート用です。
メディアクエリセクションでは、幅が 450 ピクセル以上のビューポートのオーバーライドを設定します。

このようなフォームを自作する場合は、このプロセスの段階で、デスクトップとモバイルの実機でコードをテストすることが非常に重要です。

ラベルと入力テキストは読みやすいか（特にロービジョンのユーザーにとって）。
入力欄と [ログイン] ボタンは、親指のタップターゲットとして使用できるほど十分に大きいですか？

3. 組み込みのブラウザ機能を有効にする入力属性を追加

ブラウザで入力値を保存して自動入力し、組み込みのパスワード管理機能へのアクセスを提供できるようにします。

フォームの HTML に属性を追加して、次のようにします。

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

アプリを再度表示して、[メール] をクリックします。

フォーカスがメール入力に移動したことに注目してください。これは、ラベルが for="email" 属性を介して入力に関連付けられているためです。スクリーンリーダーは、ラベルまたはラベルに関連付けられた入力にフォーカスが当たると、ラベルのテキストを読み上げます。
モバイルデバイスでメール入力にフォーカスします。

キーボードがメールアドレスの入力に最適化されていることに注目してください。たとえば、@ と . の文字がメインのキーボードに表示され、オペレーティングシステムが保存されたメールをキーボードの上に表示する場合があります。これはすべて、type="email" 属性が <input> 要素に適用されているためです。
パスワード入力欄にテキストを入力します。

type="password" 属性が要素に適用されているため、テキストはデフォルトで非表示になっています。

autocomplete、name、id、type 属性は、後で自動入力に使用できるデータを保存するために、ブラウザが入力の役割を理解するのに役立ちます。

デスクトップデバイスでメール入力にフォーカスし、テキストを入力します。 [全画面表示] をクリックすると、アプリの URL が表示されます。ブラウザにメールアドレスを保存している場合は、保存したメールアドレスを選択できるダイアログが表示されることがあります。これは、メール入力に autocomplete="username" 属性が適用されているためです。

autocomplete="username" と autocomplete="current-password" は、ブラウザが保存された値を使用して入力欄を自動入力するのに役立ちます。

注: メールの入力には autocomplete="username" を使用します。type="email" を使用する必要がありますが、username は最新のブラウザのパスワードマネージャーで認識されます。また、id="email" と name="email" を使用することもできます。

ブラウザによって、フォーム入力の役割を特定し、さまざまなウェブサイトで自動入力を行うための異なる手法が使用されています。

属性を追加または削除して、ご自身でお試しください。

プラットフォーム間の動作をテストすることは非常に重要です。異なるデバイスの異なるブラウザで値を入力してフォームを送信する必要があります。BrowserStack を使用すると、さまざまなプラットフォームで簡単にテストできます。BrowserStack はオープンソースプロジェクトでは無料です。試してみよう:

この時点で、index.html ファイルは次のようになります。

4. パスワードの表示を切り替える UI を追加

ユーザビリティの専門家は、ユーザーが [パスワード] フィールドに入力したテキストを確認できるアイコンまたはボタンを追加することを強く推奨しています。これを実現する組み込みの方法はないため、JavaScript を使用して自分で実装する必要があります。

この機能を追加するコードは簡単です。この例では、アイコンではなくテキストを使用しています。

index.html、style.css、script.js の各ファイルを次のように更新します。

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="current-password" required>
</section>

style.css ファイルの末尾に次の CSS を追加します。
```
button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}
```
これにより、[パスワードを表示] ボタンが書式なしテキストのように表示され、パスワードセクションの右上に表示されます。

次の JavaScript を script.js ファイルに追加して、パスワードの表示を切り替え、適切な aria-label を設定します。

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

パスワード表示ロジックを試してみましょう。
1. アプリを表示します。
2. パスワードフィールドにテキストを入力します。
3. [パスワードを表示] をクリックします。
異なるオペレーティングシステムの複数のブラウザで手順 4 を繰り返します。

UX デザインについて考えてみましょう。ユーザーは [パスワードを表示] に気づき、それを理解するでしょうか？この機能を提供するためのより良い方法はありますか？このタイミングで、少数の友人や同僚を対象に割引のユーザビリティテストを実施することをおすすめします。

この機能がスクリーンリーダーでどのように動作するかを確認するには、ChromeVox Classic 拡張機能をインストールして、フォームを操作します。aria-label の値は意図したとおりに機能していますか？

Gmail などの一部のウェブサイトでは、パスワードの表示を切り替えるためにテキストではなくアイコンが使用されています。この Codelab を完了したら、SVG 画像を使用してこれを実装します。マテリアルデザインでは、無料でダウンロードできる高品質のアイコンが提供されています。

この時点で、コードは次のようになります。

5. フォームの検証を追加する

フォームを送信する前にデータを検証し、変更が必要な内容を表示することで、ユーザーがデータを正しく入力できるようにします。

HTML フォームの要素と属性には基本的な検証のための機能が組み込まれていますが、ユーザーがデータを入力しているときやフォームを送信しようとしたときに、JavaScript を使用してより堅牢な検証を行うことも必要です。

このステップでは、Constraint Validation API（広くサポートされている）を使用して、フォーカスを設定してプロンプトを表示する組み込みのブラウザ UI を使用してカスタム検証を追加します。

パスワードやその他の入力に関する制約をユーザーに伝えます。推測させないでください。

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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

このリリースでは、次の 2 つの新機能が追加されています。

パスワードの制約に関する情報
パスワード入力の aria-describedby 属性（スクリーンリーダーは、ラベルテキスト、入力タイプ（パスワード）、説明の順に読み上げます）。

style.css ファイルの末尾に次の CSS を追加します。

div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

次の JavaScript を script.js ファイルに追加します。

passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

試してみましょう。

最近のブラウザにはすべて、フォームの検証機能が組み込まれており、JavaScript による検証もサポートされています。
1. 無効なメールアドレスを入力して [Sign in] をクリックします。ブラウザに警告が表示されます。JavaScript は必要ありません。
2. 有効なメールアドレスを入力し、パスワードの値を入力せずに [Sign in] をクリックします。ブラウザは、必須項目の値が設定されていないことを警告し、パスワード入力にフォーカスを設定します。
3. 無効なパスワードを入力して [ログイン] をクリックします。問題の内容に応じて異なるメッセージが表示されるようになりました。
ユーザーがメールアドレスとパスワードを入力するのをサポートするさまざまな方法を試してください。Better password form fields は、いくつかの賢い提案を提供します。

この時点で、コードは次のようになります。

さらに便利なサービス

この Codelab では表示されませんが、次の 4 つの重要なログインフォームの機能は必要です。

ユーザーがパスワードを簡単に再設定できる [パスワードを忘れた場合] ボタンを追加します。
利用規約とプライバシーポリシーのドキュメントへのリンクを記載して、ユーザーがデータの保護方法を確認できるようにします。
スタイルやブランディングを考慮し、これらの追加機能がウェブサイトの他の部分と一致するようにしてください。
分析と RUM を追加して、フォームのデザインのパフォーマンスとユーザビリティをテストおよびモニタリングできるようにします。

クロスプラットフォーム ブラウザの機能を使用してログイン フォームを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

1. 意味のある HTML を使用する

2. 指と親指向けに設計

3. 組み込みのブラウザ機能を有効にする入力属性を追加

4. パスワードの表示を切り替える UI を追加

5. フォームの検証を追加する

さらに便利なサービス

クロスプラットフォームブラウザの機能を使用してログインフォームを作成する