Accessible Login Form
Die Anmeldung, die ihre Felder benennt
Feld, Autovervollständigung, Schaltfläche, Zustand: vier Stellen im Anmeldeformular.
Anatomie der Anmeldung
Vier Verbindungen führen sicher ins Konto
Sehen Sie, welche sichtbare Information mit welchem HTML-Attribut verbunden ist.
Name
Sichtbares Label
for="email" trifft id="email". Das vergrößert die Klickfläche und liefert den Namen für Sprachsteuerung und Vorleseprogramme.
Zweck
Passende Autofill-Tokens
username und current-password sagen Browsern und Passwortmanagern, welche gespeicherten Werte hierhin gehören.
Fehler
Text, Zustand, Bezug
Der Text nennt das Problem. aria-invalid="true" markiert das Feld; aria-describedby verbindet es mit Hinweis und Fehlermeldung.
Zugang
Ein Schalter mit Zustand
Der Name „Passwort anzeigen“ bleibt stabil. aria-pressed meldet den Zustand. Einfügen bleibt erlaubt, damit Passwortmanager funktionieren.
Kopierbares Grundgerüst
Das HTML im Fehlerzustand
Rendern Sie Fehlertext und Fehlerattribute erst nach einem fehlgeschlagenen Versuch. Vorher entfallen der Fehlerkasten und beide aria-invalid-Attribute.
<form action="/anmelden" method="post">
<div id="anmeldefehler" class="fehler" tabindex="-1">
<strong>Die Anmeldung war nicht möglich.</strong>
<p>Prüfen Sie E-Mail-Adresse und Passwort.</p>
</div>
<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email" required
autocomplete="username" autocapitalize="none" spellcheck="false"
aria-invalid="true" aria-describedby="anmeldefehler">
<label for="pw">Passwort</label>
<input id="pw" name="pw" type="password" required
autocomplete="current-password" aria-invalid="true"
aria-describedby="pw-hinweis anmeldefehler">
<p id="pw-hinweis">Einfügen ist erlaubt.</p>
<button type="button" id="pw-schalter"
aria-controls="pw" aria-pressed="false">
Passwort anzeigen
</button>
<button type="submit">Anmelden</button>
</form>Passwort anzeigen
Der Zustand ändert sich, der Name bleibt
const feld = document.getElementById('pw');
const schalter = document.getElementById('pw-schalter');
schalter.addEventListener('click', () => {
const verdeckt = feld.type === 'password';
feld.type = verdeckt ? 'text' : 'password';
schalter.setAttribute('aria-pressed', String(verdeckt));
});type="button" verhindert ungewolltes Absenden. Der Fokus bleibt auf dem Schalter, dessen neuer Zustand direkt angesagt werden kann.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Das Feld hat keinen Namen Regel label
Nur der Platzhalter nennt das Feld, und der verschwindet beim Tippen. Ein label bleibt.
Kritisch autocomplete="email-address" ist kein Wert Regel autocomplete-valid
Der Browser kennt nur die festen Tokens. Für die E-Mail heißt es autocomplete="email".
Kritisch Die Passwort-Anzeige hat keinen Namen Regel button-name
Das Auge-Symbol sagt nur „Schaltfläche“. aria-label nennt „Passwort anzeigen“.
Kritisch aria-invalid="error" ist kein Wert Regel aria-valid-attr-value
aria-invalid kennt true und false. Nur damit meldet das Feld einen Fehler.
Zum Mitnehmen
Das Anmeldeformular, korrigiert
Zwei Felder, eine Schaltfläche. Alles im HTML.
Korrektur in 3 Schritten ansehen
Felder benennen und Autovervollständigung setzen
label liefert den Namen, autocomplete den Zweck. Passwortmanager füllen dann beide Felder.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="email" name="email" placeholder="E-Mail" autocomplete="email-address"> <input type="password" name="pw" placeholder="Passwort">Nachher
<label for="email">E-Mail-Adresse</label> <input id="email" type="email" name="email" autocomplete="email"> <label for="pw">Passwort</label> <input id="pw" type="password" name="pw" autocomplete="current-password">Markierte Zeilen wurden geändert
So prüfen Sie es Tab ins erste Feld. Der Browser bietet gespeicherte Zugangsdaten an.
Der Passwort-Anzeige einen Namen geben
aria-pressed zeigt, ob das Passwort gerade sichtbar ist. Der Name bleibt gleich.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" class="eye"> <svg aria-hidden="true"><use href="#icon-eye"></use></svg> </button>Nachher
<button type="button" class="eye" aria-label="Passwort anzeigen" aria-pressed="false"> <svg aria-hidden="true"><use href="#icon-eye"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf das Auge. Ein Vorleseprogramm sagt „Passwort anzeigen, Umschaltfläche, nicht gedrückt“.
Den Fehlerzustand gültig melden
aria-invalid="true" markiert das Feld, aria-describedby bindet die Meldung an.
KorrekturvergleichSchritt 3 · HTML Vorher
<input id="pw" type="password" name="pw" aria-invalid="error"> <p class="error">Passwort falsch</p>Nachher
<input id="pw" type="password" name="pw" aria-invalid="true" aria-describedby="pw-fehler"> <p id="pw-fehler" class="error">Das Passwort ist falsch.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Tab ins Feld. Ein Vorleseprogramm sagt „Passwort, ungültige Eingabe, das Passwort ist falsch“.