Zwei Geschichten
- Jason Grigsby findet, dass die Online-Bestellformular von Chipotle eine Eingabemaskierungstechnik verwendet, die das Ablaufjahr einer Kreditkarte zerstückelt, sie ungültig macht und somit die Bestellung verweigert. Wenn stattdessen
pattern="\d\d" maxlength="2"verwendet würde (native Browserfunktion), ist der Browser schlau genug, um das Richtige zu tun und die Bestellung nicht zu verweigern. Ausgehend von veröffentlichten Daten beläuft sich dies auf 4,4 Millionen Dollar. - Adrian Roselli erinnert an einen allzu häufigen Formular-Barrierefreiheitsfehler, bei dem ein fehlendes
for/id-Attribut fürlabels undinputs zu einer unbrauchbaren Erfahrung führt und einen Verlust von 18 Millionen Dollar für Kampagnen bedeutet.
Die Zuweisung von Label/Input macht mir wirklich zu schaffen. Ich finde, das ist ein extrem grundlegendes Stück HTML-Wissen, das sowohl der Barrierefreiheit als auch der allgemeinen Benutzererfahrung zugutekommt. Es ist Teil jedes HTML-Lehrplans, den ich je gesehen habe, und wird regelmäßig als etwas hervorgehoben, das man richtig machen muss. Und keine Woche vergeht, in der ich nicht irgendeine Produktionswebsite finde, die es nicht tut.
Das schaffen wir alle!
<label for="name">Name:</label>
<input id="name" name="name" type="text">
<!-- or -->
<label>
Name:
<input name="name" type="text">
</label>
Okay, aber wenn Sie den Platzhalter anstelle des Labels bevorzugen?
Stellen Sie sicher, dass Sie dann ein "visuell verstecktes" Label haben. Platzhalter sind nicht 508-konform. :D
Sie ersetzen ein Label nicht durch einen Platzhalter, genauso wenig wie Sie ein Auto durch einen Aufzug ersetzen. Sie tun unterschiedliche Dinge.
Ein Platzhalter SCHLÄGT vor, was eingegeben werden soll, und ein Label UNTERRICHTET Sie, was dieses Feld darstellt. Platzhalter verschwinden, sobald Sie mit der Eingabe beginnen (was sie für Menschen, die sich schlecht an Anweisungen erinnern können (d. h. die meisten Ihrer Kunden), nutzlos macht) und werden von Hilfstechnologien nicht gelesen.
Sie sollten immer auch ein Label haben. Einige mobile Browser zeigen den Platzhaltertext nicht an, und wenn der Browser eines Benutzers versucht, Eingabefelder mit falschen Informationen vorab auszufüllen, muss der Benutzer das Feld löschen, um den Platzhalter zu sehen.
Sie sollten niemals den Platzhalter anstelle eines Labels verwenden. Der Platzhalter ist als zusätzliche Information für den Benutzer gedacht, nicht als Ersatz für ein Label.
Platzhaltertext wird nicht anstelle eines Labels verwendet; er wird zusätzlich zu einem Label verwendet. Sie haben unterschiedliche Zwecke: Labels beschreiben, was in das Feld gehört, während Platzhaltertext einen Hinweis gibt, z. B. das erwartete Format für ein Datumsfeld. Aus Barrierefreiheitsgründen ist es äußerst wichtig, die Implementierung nicht nur nach dem visuellen Erscheinungsbild zu wählen, sondern die vom HTML-Standard bereitgestellten semantischen Elemente zu verwenden. Labels werden von Screenreadern gelesen; Platzhaltertext im Allgemeinen nicht, sodass blinde und sehbehinderte Benutzer unklar sind, welches Feld sie ausfüllen, wenn kein Label vorhanden ist. Es ist auch schlechte Benutzerfreundlichkeit für sehende Benutzer – sobald Sie mit dem Ausfüllen eines Feldes beginnen, verschwindet der Platzhaltertext. Ohne ein sichtbares Label leiden alle. Wenn die Ästhetik von unbeschrifteten Feldern für einen Designer äußerst wichtig ist, gibt es Techniken, um das Label zunächst über dem Feld anzuzeigen und es dann außerhalb des Feldes zu verschieben, sobald das Feld den Fokus erhält. Sie verlieren die Verwendung von Platzhaltertext für Hinweise, aber Sie haben diesen Kompromiss bereits eingegangen, wenn Sie Platzhaltertext anstelle von Labels verwenden.
Im Allgemeinen gibt es einen Grund für semantische HTML-Elemente. Zeit, die für deren Erforschung und Verständnis aufgewendet wird, ist selten verschwendet.
Ein Platzhalter ist kein Label.
Wenn Sie einen Platzhalter anstelle eines Labels verwenden, gehen möglicherweise ein paar Millionen verloren. Platzhalter werden von Screenreadern vollständig ignoriert. Sie müssen ein Label haben, um dem Benutzer mitzuteilen, um was es sich bei dem Feld handelt, sonst "Text-Eingabefeld, Text-Eingabefeld".
Toller Artikel
Wenn Sie aus Designgründen kein <label> verwenden möchten, können Sie immer noch "arial-label", "aria-labelledby" oder sogar "title" verwenden, um einem Formularelement einen zugänglichen Namen zuzuweisen. (Beachten Sie jedoch, dass die Verwendung von "placeholder" als "label" ein Anti-Pattern ist und vermieden werden sollte.)
Tun Sie das nicht.
Verwenden Sie das Attribut placeholder nicht anstelle eines Elements. Ihre Zwecke sind unterschiedlich: Das Attribut beschreibt die Rolle des Formularelements; das heißt, es gibt an, welche Art von Information erwartet wird, das Attribut placeholder ist ein Hinweis auf das Format, das der Inhalt haben sollte. Es gibt Fälle, in denen das Attribut placeholder dem Benutzer nie angezeigt wird, daher muss das Formular ohne es verständlich sein.
https://developer.mozilla.org/pl/docs/Web/HTML/Element/Input
Ein Platzhalter ist kein Label. Es ist eher suggestiver/Beispieltext. Wenn das Design keinen sichtbaren Eingabefeld vorsieht, würde ich das Label nur für Screenreader mit CSS anzeigen.
Tun Sie das nicht! Es hat sich als schlechte Benutzerfreundlichkeit und mangelnde Barrierefreiheit erwiesen. (https://www.nngroup.com/articles/form-design-placeholders/)
Fügen Sie Ihrem Label einfach eine Klasse wie .sr-only (nur für Screenreader) hinzu und machen Sie es unsichtbar
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Auf diese Weise ist es zugänglich, zeigt aber nur den Platzhalter im Eingabefeld an.
Ein Platzhalter sollte als Beispiel für den Wert verwendet werden, der in das Eingabefeld eingegeben werden soll, nicht als Label selbst.
In diesem Fall könnten Sie das Eingabefeld etwas zugänglicher machen, indem Sie das Label ausblenden und die Attribute "for/id" verwenden.
Das Attribut placeholder ist kein Ersatz für ein Label-Element. Wenn Sie das visuelle Erscheinungsbild eines Platzhalters bevorzugen, können Sie Ihr Label so gestalten, dass es wie eines aussieht, aber Sie benötigen ein Label-Element für grundlegende Barrierefreiheit.
Platzhalter sind auch gut, aber sie dienen nicht demselben Zweck wie ein Label.
Platzhaltertext ist schlechte Praxis, um ein Label zu ersetzen. Zum Beispiel haben Sie placeholder="Vorname". Sobald das Eingabefeld nicht leer ist, aber zum Beispiel von Chrome automatisch ausgefüllt wird, weiß der Benutzer nicht, was in diesem Feld benötigt wird. Oder wenn der Benutzer einen falschen Wert eingibt und das Formular einen Fehler zurückgibt, muss er zuerst das Feld löschen, um zu wissen, ob es sich um ein Namens-, E-Mail- oder Adressfeld handelt.
Placeholder="Beispiel: Max Mustermann" mit einem Label (Name) ist aus Sicht der Benutzerfreundlichkeit besser.
<label for="name" aria-label="Name"></label><input id="name" name="name" type="text" placeholder="Name">Im Allgemeinen sollten Sie jedoch, wenn Sie Platzhalter anstelle von Labels verwenden möchten, schwebende Labels verwenden.
Verlassen Sie sich nicht nur auf den Platzhalter. Screenreader werden diesen Platzhalter nicht auf die gleiche Weise wie ein
labelübertragen. Sie sollten zumindest einlabel[for]haben und eine Art Glas verwenden, das nur für Screenreader sichtbar ist (wie dassr-onlyvon Bootstrap) auf dem Label.Soweit ich weiß, sollte ein Platzhalter niemals als Ersatz für ein Label verwendet werden. Sobald der Benutzer den Fokus auf das Feld legt, kann der Platzhalter in einigen Browsern verloren gehen und sie sind dann verwirrt, was das Formular von ihnen erwartet.
Warum nicht beides? Ein Label zu verwenden ist besser für die Barrierefreiheit, ein Platzhalter ist besser wegen des :placeholder-shown Pseudo-Elements. Wenn man beides kombiniert, kann man ein Label anzeigen, wenn der Platzhalter nicht angezeigt wird (d. h. die Eingabe ist ausgefüllt). Dies ständig zu verwenden, ein schnelles Beispiel, um eine Vorstellung von den Möglichkeiten zu geben: https://codepen.io/Steynno/pen/abogMGL
Das sollten Sie nicht..
Wenn Sie einen Platzhalter anstelle eines Labels verwenden möchten, müssen Sie dennoch ein Label für Barrierefreiheitszwecke haben oder zumindest das ARIA-Label-Attribut verwenden, um Screenreadern mitzuteilen, wofür die Eingabe bestimmt ist.
Zusätzlich gibt es unzählige Codepens, die zugängliche Platzhalter zeigen, die stattdessen Labels verwenden (und auch sichtbar sind, sobald Sie mit der Eingabe beginnen).
Platzhalter sind überhaupt kein Ersatz für Labels.
Sie müssen das Label für Benutzer ausblenden (und mit einem "Clip"-Trick für Screenreader sichtbar machen) und Ihren Text auch in Platzhaltern einfügen.