パスワード強度メーター
表示/非表示トグル付きのパスワード欄。長さと文字種の多さから強度を判定し、弱い/普通/強いのバーとラベルがリアルタイムに変化する。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 登録・変更フォームのパスワード欄
- 長さと文字種から強度を段階で見せたい入力
- 表示切替と強度表示を1つにまとめたい画面
- 避ける場面
- ログイン欄（既存パスワードに強度は不要）
- 強度をポリシーとして強制する画面（判定は簡易）
- 構成要素
- ラベル
- パスワード入力欄
- 目のトグル
- 4段メーター
- 強度の文言
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で入力欄→目のボタン、Enter／Space で表示・非表示を切替。入力のたびに強度を更新
- 支援技術
label[for]、aria-describedby で強度文言を結び aria-live=polite で読み上げ。メーターは aria-hidden で文言が正。トグルは aria-pressed＋aria-label 切替
- 動き
セグメント色 250ms、文言色 200ms（強度の推移）。reduced-motion で無効
デザインの要点
- 強度は長さ（8／12字）と文字種の数で 0〜4 点。連続バーでなく4分割にすると、いま何段目かが一目で数えられる
- 色は朱→黄土→緑の3段だが、文言「弱い／普通／強い」を必ず併記する。色だけの判定は読めない人がいる
- 表示切替は type を text/password で入れ替え、aria-pressed も更新する。目のアイコンだけでは状態が伝わらない
- 判定は簡易なので、ポリシーの強制には使わない。目安を示してユーザーに直させる道具にとどめる
実装メモ
強度は「長さ（8/12文字）」と「文字種の多さ（小文字・大文字・数字・記号）」から0〜4のスコアを出し、4本のセグメントと色（朱→黄土→緑）で示します。色だけでなくラベル文字でも段階を伝えています。表示切替は type を text/password で入れ替え、aria-pressed も更新します。
コード（コピーして使えます）
<form class="ps-form" novalidate>
<label class="ps-label" for="ps-input">パスワード</label>
<div class="ps-field">
<input
id="ps-input"
class="ps-input"
type="password"
placeholder="8文字以上を推奨"
autocomplete="new-password"
aria-describedby="ps-text"
/>
<button class="ps-toggle" id="ps-toggle" type="button" aria-label="パスワードを表示" aria-pressed="false">
<svg class="ps-eye" id="ps-eye-on" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
<svg class="ps-eye" id="ps-eye-off" style="display:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
</button>
</div>
<div class="ps-meter" aria-hidden="true">
<span class="ps-seg" data-i="0"></span>
<span class="ps-seg" data-i="1"></span>
<span class="ps-seg" data-i="2"></span>
<span class="ps-seg" data-i="3"></span>
</div>
<p class="ps-text" id="ps-text" aria-live="polite">パスワードを入力してください</p>
</form>