Placeholder ist kein Label
Warum verschwindende Hinweise echte Nutzer im Stich lassen.
Placeholder ist kein Label ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Die verlockende Abkürzung
Es ist verlockend, Hinweistext in ein Feld zu setzen und das Label wegzulassen. Doch ein placeholder ist ein Hinweis, kein Name. ⚠️
Er verschwindet
Sobald jemand mit der Eingabe beginnt, verschwindet der placeholder. Nun ist nicht mehr erkennbar, wofür das Feld gedacht war.
<input type="text" placeholder="Full name">Gedächtnisbelastung
Benutzer mit Gedächtnis- oder Aufmerksamkeitsproblemen müssen sich den Hinweis merken, nachdem er verschwunden ist. Ein dauerhaft sichtbares Label nimmt ihnen diese Belastung ab.
Standardmäßig geringer Kontrast
Placeholder-Text ist normalerweise hellgrau und erfüllt daher häufig die Anforderungen an den Kontrast nicht. Menschen mit eingeschränktem Sehvermögen können ihn möglicherweise überhaupt nicht lesen.
Wirkt wie ausgefüllt
Grauer Hinweistext kann wie ein bereits ausgefüllter Wert wirken. Die Person überspringt das Feld, und eine Fehlermeldung wegen der erforderlichen Eingabe kommt überraschend.
Uneinheitlich bei Screenreadern
Die Unterstützung von placeholder als Name durch Screenreader ist lückenhaft und variiert je nach Browser. Sie können sich nicht darauf verlassen, dass der Text angesagt wird.
Beides verwenden, nicht entweder oder
Placeholder sind als zusätzliche Hinweise in Ordnung, etwa als Formatbeispiel. Kombinieren Sie sie mit einem echten Label und verwenden Sie sie niemals allein.
<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">Hier sind Formatbeispiele besonders nützlich
Ein Placeholder eignet sich hervorragend für ein Formatbeispiel, etwa ein Datumsformat. Das Label enthält weiterhin den eigentlichen Namen des Feldes.
Floating Labels
Floating Labels gleiten bei der Eingabe nach oben, sodass der Name sichtbar bleibt. Sie sind echte Labels, nur animiert, und erfüllen daher die Anforderungen.
Durch Ausfüllen testen
Schnelltest: Geben Sie etwas in das Feld ein. Wenn Sie anschließend nicht mehr erkennen können, was das Feld erwartet, hat der Placeholder die Aufgabe eines Labels übernommen.
WCAG bestätigt das
Das WCAG-Kriterium Labels or Instructions erwartet einen klaren, dauerhaft sichtbaren Namen. Felder, die ausschließlich Placeholder verwenden, fallen bei Prüfungen regelmäßig durch.
Schnelltest
Warum ist ein Placeholder kein guter Ersatz für ein Label?
Zusammenfassung
Ein placeholder ist ein verblassender Hinweis, kein Name. Verwenden Sie ein echtes Label und Placeholder nur als zusätzliche Hilfe zum Format. 💡
Häufig gestellte Fragen
Ist die Lektion „Placeholder ist kein Label“ kostenlos?
Ja — der vollständige Text von „Placeholder ist kein Label“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Placeholder ist kein Label“?
Warum verschwindende Hinweise echte Nutzer im Stich lassen. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Placeholder ist kein Label“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Jede Eingabe braucht ein echtes label
- Placeholder ist kein Label
- Felder mit fieldset und legend gruppieren
- Hilfetexte und Pflichtfelder ansagen lassen