Localized labels demo

Passwortstärkeanzeige

Diese Variante nutzt deutsche Texte für Stärkegrade, Anforderungsstatus, Fortschrittswerte und höfliche Screenreader-Meldungen.

Localized labels

Lokalisiertes Feedback testen

Gib ein Beispielpasswort ein, um visuelle Hinweise, semantischen Fortschritt und höfliche Screenreader-Rückmeldungen zusammen zu sehen.

  • Alle sichtbaren Statusmeldungen sind in der Seite verfasst.
  • Die Passwortbewertung bleibt lokal im Browser.
  • Text und Fortschritt vermitteln den Zustand ohne reine Farbe.

Verwende mindestens 12 Zeichen mit Groß- und Kleinbuchstaben, einer Zahl und einem Sonderzeichen.

Passwortstärke: Nicht bewertet

  • Fehlt Mindestens 12 Zeichen
  • Fehlt Enthält einen Großbuchstaben
  • Fehlt Enthält einen Kleinbuchstaben
  • Fehlt Enthält eine Zahl
  • Fehlt Enthält ein Sonderzeichen

Developer notes

How this localization works

The plugin reads localized copy from authored HTML and optional message overrides. Translate the label, helper text, feedback paragraph, requirement text, and message attributes in the page language, then connect the meter to the input with data-input-id. 

<div
  data-a11y-password-strength-meter
  data-input-id="password"
  data-feedback-id="password-strength-feedback"
  data-strength-label-weak="Schwach"
  data-met-text="Erfüllt"
  data-needed-text="Fehlt"
  data-live-template="Passwortstärke: {label}"
  data-progress-value-template="{label}, {score} von {max}"
>
  <p id="password-strength-feedback">
    Passwortstärke: Nicht bewertet
  </p>
</div>