it-swarm.com.de

HTML-Label-Zuordnung zu Eingaben; schlechte UX?

Ich bin ein Webentwickler mit einem seltsamen UX-Problem. Wenn ich HTML-Formulare erstelle, stelle ich sicher, dass die Bezeichnung jeder Eingabe über ein <label></label> - Tag implementiert wird und dass jede Bezeichnung das Attribut for verwendet, um sie der Eingabe zuzuordnen. Zum Beispiel:

<label for="firstName">First Name</label>
<input id="firstName" type="text" />

<label for="lastName">Last Name</label>
<input id="lastName" type="text" />

Ich habe immer gehört, dass dies eine bewährte Methode für die Barrierefreiheit ist. Es hat auch einen zusätzlichen Vorteil, wenn ich die Eingabe fokussiere, wenn auf das Etikett geklickt wird.

Andere hier sind sich in diesem letzten Punkt nicht einig.

Sie sagen tatsächlich, dass es seltsam ist, dass das Klicken auf das Etikett die Eingabe fokussiert und dass es sich um ein "nicht standardmäßiges" Verhalten handelt. Da ich Standard-HTML-Praktiken verwende, würde ich denken, dass dies tatsächlich Standard ist. Vielleicht ist dies nur ihre Reaktion auf die Tatsache, dass andere Seiten der Website keine echten Labels verwenden und dieses Verhalten nicht haben, aber sie scheinen dieses Label-Verhalten wirklich zu hassen.

Ich verstehe nicht Bin ich hier falsch? Wird es als schlechte UX-Praxis angesehen, wenn Labels eine Eingabe fokussieren? Wenn ja warum? Wenn ich das beheben muss, gibt es eine alternative Möglichkeit, eine Eingabe ohne Verwendung eines Etiketts zugänglicher zu machen?

31
Jacob

Ich kann nicht verstehen, warum Sie einen reduzierten Klickbereich für Ihr Formularfeld wünschen. Durch Einfügen des Attributs "für" in das Beschriftungs-Tag können Sie den anklickbaren Bereich vergrößern. Es ist seit einiger Zeit ein Webstandard und ich würde denken, dass die meisten Benutzer an diesem Punkt an das Verhalten gewöhnt sind, was es zu einer Konvention macht. Während es möglicherweise keine Konvention in Software ist, würde ich es definitiv als Webkonvention betrachten.

Der beste Vorteil ist hier mit Sicherheit verbesserte Zugänglichkeit (siehe Abschnitt über Formulareingabebeschriftungen).

Ich denke nicht, dass dies nur für Kontrollkästchen und Optionsfelder gilt. Ich habe Fälle gesehen, in denen es praktisch ist, sie auch für Texteingaben zu verwenden, obwohl sie definitiv nicht so hilfreich sind wie bei Optionsfeldern und Kontrollkästchen.

Sie können auch sehen, dass W3Schools erwähnt es als eine Verbesserung der Benutzerfreundlichkeit direkt in seiner Referenz , obwohl es zugegebenermaßen nicht die beste Referenz ist. Wenn Sie sich jedoch das HTML 4.01-Spezifikation ansehen, soll das Attribut "for" des Label-Tags sicherstellen, dass es explizit einem anderen Steuerelement zugeordnet ist, und in der Spezifikation wird ausdrücklich erwähnt, dass "Wenn ein LABEL-Element den Fokus erhält, wird es gibt den Fokus an die zugehörige Steuerung weiter ".

Wie bei diesem Webdesign-Blog finde ich auch, dass es ein "Verbrechen" der Benutzerfreundlichkeit ist, wenn das Feld und das Etikett nicht zugeordnet werden.

42
GotDibbs

Diese "anderen" sind falsch. Dies ist die Absicht des HTML-Label-Tags und die ordnungsgemäße Implementierung. Abgesehen von der Notwendigkeit der Barrierefreiheit ist dies auch ein großer UX-Vorteil, insbesondere bei Dingen wie Kontrollkästchen, bei denen es normalerweise einfacher ist, das Etikett zu treffen als das winzige Kontrollkästchen.

Wenn diese 'anderen' es hassen, sagen Sie ihnen, sie sollen aufhören, auf die Etiketten zu klicken. ;)

18
DA01

Das Verhalten ist in Benutzeroberflächen nicht üblich und spiegelt wahrscheinlich nur die Funktionsweise von label für Kontrollkästchen und Optionsfelder wider (durch Klicken auf die Beschriftung wird der Status umgeschaltet, und this entspricht dem allgemeinen UX-Design und ist sehr nützlich). Für Textfelder ist die Funktion weder besonders nützlich noch schädlich. Jeder Versuch, dies mit JavaScript zu verhindern, verursacht wahrscheinlich Probleme, anstatt irgendwelche zu lösen, und die Nichtverwendung von label ist schlecht für die Barrierefreiheit (da Hilfssoftware other für label Markup verwendet ).

2

Das ist ziemlich umstritten.

Bei einem Touch-Gerät kann das Erweitern des anklickbaren Bereichs, insbesondere bei Texteingaben, kontraproduktiv sein, wenn der Benutzer beabsichtigt, das Formular nach unten zu scrollen, anstatt die Eingabe auszufüllen.

0