1Passwordで最適に機能するウェブサイトをデザインする
1Passwordマニュアル｜1Passwordを使って安全にパスワードを生成、保存し、自動入力で快適なウェブ体験を実現する方法をご紹介します。
Last updated
1Passwordマニュアル｜1Passwordを使って安全にパスワードを生成、保存し、自動入力で快適なウェブ体験を実現する方法をご紹介します。
Last updated
1Password は、ほとんどのウェブサイトでパスワードを生Create、入力、Saveできるように設計されています。ベスト プラクティスに従ってページを開発する限り、ウェブサイトで 1Password をサポートするために特別なことをする必要はありません。これにより、各ページ要素の意図が明確になります。ページに変更を加えた場合でも、1Password がページを理解しやすくなります。
💡ヒント
1Password は方法を紹介します。
1Password でサイトへのSaveや入力に問題がある場合は、フォームのベスト プラクティスに従っていることを確認してください。
全てのフィールドに一意の要素 ID を使用します。
<input>フィールドを<form>要素で囲みます。
関連するフィールド (ユーザー名やパスワードなど) を同じ<form>要素にグループ化します。
関連のないフィールドを別の<form>要素に分離します。例えば登録フィールドとサインインフィールドを別のフォームに配置します。
1PasswordにフィールドのSaveや入力を促したくない場合は、data-1p-ignore属性を使用して 1Passwordにそのフィールドを無視するように指示できます。
例:
<input type="text" id="username" name="ig" data-1p-ignore>
パスワード変更フォームでは、現在のパスワード、新しいパスワード、パスワードの確認の順に入力します。これにより、各フォーム要素の意図が明確になります。
例:
<label for="current-password">Current Password: </label>
<input type="password" name="current-password" id="current-password" autocomplete="current-password" />
<label for="password">New Password: </label>
<input type="password" name="new-password" id="new-password" autocomplete="new-password" />
<label for="confirm-password">Confirm Password: </label>
<input type="password" name="confirm-password" id="confirm-password" autocomplete="new-password" />
パスワードのリセットおよび「パスワードを忘れた場合」のフォームでは、リセットするパスワードのユーザー名を含めます。これにより、1Password は新しいパスワードで更新する項目を判断できます。
例:
<input style="display: none;" type="text" name="username" id="username" autocomplete="username" value="wendy.appleseed" /></br>
<label for="password">New Password: </label>
<input type="password" name="password" id="new-password" autocomplete="new-password" />
1Password がスマート パスワードを生Createするために使うルールを提供するには、各<input type="password">要素に次の属性を追加します。
passwordrules
minlength
maxlength
ウェブサイトをアクセシブルにすることは、ウェブサイトを使う全ての人にメリットをもたらします。さらに、ウェブサイトをアクセシブルにすることで、1Passwordにも手がかりが提供されます。
ページを調べるとき、1Password はアクセシビリティーの手がかりを利用してフィールドを見つけることができます。
全てのフィールドに<label>要素を割り当てます。
ラベルの属性を使用してfor、ラベルを適切なフィールドに関連付けます。
<label for="username-field">Username</label>
<input name="username" id="username-field">
サイトに変更を加えた場合でも 1Password が常に機能するようにするには、次の追加ガイドラインに従ってください。
オーバーレイの代わりにplaceholderフィールドの属性を使用します。
生Createされたフィールド名と ID を使用しないでください。
DOM からフィールドを動的に追加したり削除したりしないでください。フィールドを再利用し、必要のないときは非表示にします。
1Passwordは、あなたのウェブサイトのパスワード要件に合ったパスワードを生Createすることができます。 1Passwordは、を使用して、同じアカウントシステムを共有する複数のドメインの同じリポジトリーにあると共に、ウェブサイト独自のパスワードルールを識別します。
を使うフォーム フィールドに注釈を付けます。例えば表示されないフィールドにaria-hidden属性を使用します。
フィールドに適切なautocomplete属性を使用します。これらの属性により、1Password がフィールドを識別しやすくなります。例えばワンタイムパスワードを入力できるフィールドにautocomplete="one-time-code"を追加します。
必ずでテストしてください。
上記のガイドラインに従っても問題が解決しない場合は、。