::placeholder

Nur die Teilmenge der CSS-Eigenschaften, die auf das ::first-line Pseudo-Element anwendbar sind, können in einer Regel mit ::placeholder im Selektor verwendet werden.

Kontrastverhältnis

Platzhaltertext hat typischerweise eine hellere Farbgebung, um anzuzeigen, dass er einen Vorschlag für eine Art von gültiger Eingabe darstellt und keine tatsächliche Eingabe ist.

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Platzhaltertextes und dem Hintergrund der Eingabe hoch genug ist, damit Menschen mit eingeschränkter Sehkraft es lesen können, und gleichzeitig sicherzustellen, dass es einen ausreichenden Unterschied zwischen der Farbe des Platzhaltertextes und der Eingabetextfarbe gibt, damit Benutzer den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Farbkontrastverhältnis wird durch den Vergleich der Helligkeit der Platzhaltertext- und der Eingabehintergrundfarben bestimmt. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist ein Verhältnis von 4.5:1 für Textinhalte und 3:1 für größere Texte wie Überschriften erforderlich. Großer Text ist definiert als 18.66px und fett oder größer, oder 24px oder größer.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Leitfaden 1.4 Erklärungen
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Benutzerfreundlichkeit

Platzhaltertext mit ausreichend Farbkontrast kann als eingegebene Eingabe interpretiert werden. Platzhaltertext verschwindet auch, wenn eine Person Inhalte in ein <input> Element eingibt. Beide Umstände können den erfolgreichen Abschluss von Formularen stören, insbesondere für Menschen mit kognitiven Einschränkungen.

Ein alternativer Ansatz zur Bereitstellung von Platzhalterinformationen besteht darin, diese außerhalb des Eingabefeldes in enger visueller Nähe zu platzieren und dann aria-describedby zu verwenden, um das <input> programmatisch mit seinem Hinweis zu verknüpfen.

Mit dieser Implementierung ist der Hinweisinhalt verfügbar, selbst wenn Informationen in das Eingabefeld eingegeben werden, und die Eingabe erscheint frei von vordefinierten Eingaben, wenn die Seite geladen wird. Die meisten Bildschirmlese-Technologien verwenden aria-describedby, um den Hinweis nach dem Ansagen des Etikettentextes der Eingabe vorzulesen, und die Person, die den Bildschirmleser verwendet, kann es stummschalten, wenn sie die zusätzliche Information als unnötig empfinden.

<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Platzhaltertext wird im Windows High Contrast Mode mit dem gleichen Stil wie vom Benutzer eingegebene Textinhalte angezeigt. Dies kann es für manche Menschen schwierig machen, zu bestimmen, welche Inhalte eingegeben wurden und welche Platzhaltertext sind.

Platzhalter sind kein Ersatz für das <label> Element. Ohne ein Etikett, das mit einer Kombination der Attribute for und id programmiert mit einer Eingabe verbunden wurde, können unterstützende Technologien wie Bildschirmleser <input> Elemente nicht interpretieren.

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Dieses Beispiel zeigt einige der Anpassungen, die Sie am Stil von Platzhaltertext vornehmen können.

HTML

<input placeholder="Type here" />

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

Ergebnis

Einige Browser (wie Firefox) setzen die Standard-opacity von Platzhaltern auf weniger als 100%. Wenn Sie voll deckenden Platzhaltertext wünschen, setzen Sie opacity auf 1.

HTML

<input placeholder="Default opacity" />
<input placeholder="Full opacity" class="force-opaque" />

CSS

::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}

Ergebnis

• Die :placeholder-shown Pseudo-Klasse gestaltet ein Element, das einen aktiven Platzhalter hat.
• Verwandte HTML-Elemente: <input>, <textarea>
• HTML-Formulare