::placeholder

Nur die Teilmenge von 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 ein Vorschlag für geeignete Eingaben ist und keine tatsächlichen Daten darstellt.

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Platzhaltertextes und dem Hintergrund des Eingabefeldes hoch genug ist, dass Menschen mit Sehbehinderungen es lesen können, während auch genügend Unterschied zwischen der Farbe des Platzhaltertextes und der eingegebenen Daten besteht, damit Nutzer den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Kontrastverhältnis wird bestimmt, indem die Leuchtkraft der Farben von Platzhaltertext und Hintergrund des Eingabefeldes verglichen wird. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4,5:1 für Textinhalt und 3:1 für größeren Text wie Überschriften erforderlich. Großer Text wird als 18,66px und fett oder größer, oder 24px oder größer definiert.

• WebAIM: Color Contrast Checker
• MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen
• Verstehen des Erfolgskriteriums 1.4.3 | W3C Verständnis WCAG 2.0

Benutzerfreundlichkeit

Platzhaltertext mit ausreichendem Farbkontrast kann als eingegebene Daten interpretiert werden. Platzhaltertext verschwindet auch, wenn eine Person Inhalte in ein <input> Element eingibt. Beide Umstände können den erfolgreichen Abschluss eines Formulars stören, insbesondere für Menschen mit kognitiven Herausforderungen.

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

Mit dieser Implementierung ist der Hinweisinhalt auch dann verfügbar, wenn Informationen in das Eingabefeld eingegeben wurden, und das Eingabefeld erscheint frei von vorhandener Eingabe, wenn die Seite geladen wird. Die meisten Bildschirmlese-Technologien verwenden aria-describedby, um den Hinweis nach dem Ankündigen des Beschriftungstextes des Eingabefeldes vorzulesen, und die Person, die den Bildschirmleser verwendet, kann ihn stummschalten, wenn sie die zusätzliche Information als unnötig erachtet.

<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" />

• Platzhalter in Formularfeldern sind schädlich — Nielsen Norman Group

Platzhaltertext wird mit derselben Formatierung wie vom Benutzer eingegebene Textinhalte dargestellt, wenn er im Windows Hochkontrastmodus wiedergegeben wird. Dies wird es für einige Personen schwierig machen zu bestimmen, welche Inhalte eingegeben wurden und welche Inhalte Platzhaltertext sind.

Platzhalter sind kein Ersatz für das <label> Element. Ohne eine Beschriftung, die programmatisch mit einem Eingabefeld unter Verwendung einer Kombination der for und id Attribute verbunden ist, kann Assistenztechnologie wie Bildschirmleser <input> Elemente nicht interpretieren.

• Platzhalter in Formularfeldern sind schädlich — Nielsen Norman Group

Dieses Beispiel zeigt einige Anpassungen, die Sie an den Stilen 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 den Standard-opacity-Wert von Platzhaltern auf weniger als 100%. Wenn Sie vollständig opaken 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