Framework-free TypeScript plugin

A11y Password Strength Meter

Add local password-strength guidance to semantic password fields with visible feedback, native progress semantics, requirement text, and polite live announcements.

Live package demo

Try the strength meter

Type a sample password and watch the label, progress value, requirement list, and polite live region update from the same local scoring result.

  • Authored HTML remains useful before JavaScript runs.
  • The password value stays local to the browser.
  • Text and progress communicate state without relying on color.

Use at least 16 characters with uppercase and lowercase letters, a number, and a symbol.

Password strength: Not rated

  • Needed At least 16 characters
  • Needed Includes an uppercase letter
  • Needed Includes a lowercase letter
  • Needed Includes a number
  • Needed Includes a symbol

Try it

Useful checks

  • Leave the field empty and confirm it stays not rated.
  • Type password and notice the common-password penalty.
  • Try Password123!, then a longer mixed password such as CorrectHorse12!Example.
  • Use the keyboard to reach the field and confirm focus remains visible.

Install

Quick start

npm install a11y-password-strength-meter
import { initPasswordStrengthMeters } from "a11y-password-strength-meter";
import "a11y-password-strength-meter/styles.css";

initPasswordStrengthMeters();

Markup

Progressive HTML first

Author the label, input, helper text, feedback text, and requirement checklist in HTML. JavaScript enhances that structure and keeps password values out of event detail. 

<label for="password">Create password</label>
<input
  id="password"
  type="password"
  autocomplete="new-password"
  aria-describedby="password-help password-strength-feedback"
/>

<p id="password-help">
  Use at least 12 characters with uppercase and lowercase letters,
  a number, and a symbol.
</p>

<div
  data-a11y-password-strength-meter
  data-input-id="password"
  data-feedback-id="password-strength-feedback"
>
  <p id="password-strength-feedback">
    Password strength: Not rated
  </p>
  <ul
    class="a11y-password-strength-meter__requirements"
    aria-label="Password requirements"
  >
    <li data-requirement="length" data-met="false">
      <span class="a11y-password-strength-meter__requirement-status">
        Needed
      </span>
      <span class="a11y-password-strength-meter__requirement-text">
        At least 12 characters
      </span>
    </li>
  </ul>
</div>

Package notes

Small, local, and explicit

API surface

  • A11yPasswordStrengthMeter
  • createPasswordStrengthMeter()
  • initPasswordStrengthMeters()
  • getPasswordStrength()
  • PASSWORD_STRENGTH_METER_EVENTS

Lifecycle events

  • a11y-password-strength-meter:init
  • a11y-password-strength-meter:change
  • a11y-password-strength-meter:destroy

Event detail includes the instance, never the password value.

Security boundary

The meter is local UI guidance. It does not submit passwords, validate backend policy, store secrets, or check breached password databases.