Ratgeber Platzhalter in Formularfeldern fehlen

Dieser Fehler zeigt an, dass einige deiner Formularfelder keine Platzhalter (Placeholders) haben. Platzhalter sind Texte, die in Eingabefeldern angezeigt werden, bevor der Nutzer mit der Eingabe beginnt. Sie dienen dazu, zusätzliche Hinweise oder Beispiele für die korrekte Eingabe zu geben. Das Fehlen von Platzhaltern kann die Nutzererfahrung beeinträchtigen und dazu führen, dass Nutzer nicht wissen, welche Informationen erwartet werden.

• Unklare Eingabeanforderungen: Nutzer könnten nicht verstehen, was genau in ein Feld eingegeben werden soll.
• Schlechtere Benutzererfahrung: Unzureichende Hinweise können dazu führen, dass Nutzer die Eingabe abbrechen.
• Barrierefreiheitsprobleme: Platzhalter können eine wichtige Unterstützung für Nutzer sein, die auf Tastaturen oder Screenreader angewiesen sind.

1. Identifiziere Formularfelder ohne Platzhalter:
   • Überprüfe den HTML-Code deiner Website und suche nach Eingabefeldern (<input>, <textarea>), die kein placeholder-Attribut haben.
   • Beispiel für ein fehlerhaftes Feld:

     <input type="text" id="email">

2. Füge Platzhalter hinzu:
   • Ergänze das placeholder-Attribut in den relevanten Formularfeldern. Beispiel:

     <input type="email" id="email" placeholder="E-Mail-Adresse eingeben">

3. Formuliere klare und prägnante Hinweise:
   • Vermeide lange oder verwirrende Texte. Platzhalter sollten kurz und eindeutig sein.
   • Beispiele für gute Platzhalter:
     • „Vorname“
     • „Gültige E-Mail-Adresse eingeben“
     • „123-456-7890“ (für Telefonnummern)
4. Teste die Platzhalter mit verschiedenen Geräten:
   • Überprüfe die Darstellung der Platzhalter auf mobilen Geräten und Desktop-Browsern.
   • Achte darauf, dass die Platzhalter lesbar und visuell ansprechend sind.
5. Kombiniere Platzhalter mit Labels:
   • Platzhalter ersetzen keine Labels. Stelle sicher, dass jedes Eingabefeld auch ein Label hat, um die Barrierefreiheit zu gewährleisten.
   • Beispiel:

     <label for="email">E-Mail-Adresse</label>   
     <input type="email" id="email" placeholder="E-Mail-Adresse eingeben">

6. Verwende Platzhalter nicht für Pflichtangaben:
   • Platzhalter sollten nur als zusätzliche Hinweise dienen, nicht als Ersatz für Labels oder andere Pflichtangaben.

Beispiele & Best Practices

• Zu lange Platzhalter: Halte den Text so kurz wie möglich.
• Nur Platzhalter verwenden: Ergänze immer Labels, um die Funktionalität und Barrierefreiheit zu gewährleisten.
• Verwirrende Texte: Verwende klare und einfache Formulierungen.

• Das placeholder-Attribut wird verwendet, um Texte in einem Eingabefeld anzuzeigen, bevor der Nutzer etwas eingibt.
• Platzhalter verschwinden, sobald der Nutzer beginnt, etwas einzugeben.
• Kombiniere Platzhalter mit Labels für eine optimale Barrierefreiheit und Benutzerfreundlichkeit.

• MDN Web Docs: HTML Placeholder
• WCAG Richtlinien für Formulare
• Google Lighthouse für Barrierefreiheit