Kann ein Eingabefeld zwei Beschriftungen haben?

134

Mary hatte eine kleine Form und ihre Felder waren genau so beschriftet.
Immer wenn sich ein Fehler einschlich, säte Verwirrung.

Ich habe eine Beschriftung für jedes Eingabefeld ... eine ziemlich normale Angelegenheit. Nach der Validierung des Formulars wird oben im Formular ein hilfreicher kleiner Absatz angezeigt, in dem angegeben ist, welche Informationen fehlen oder falsch sind.

Kann ich zwei Beschriftungen für dasselbe Eingabefeld haben? Eine in der richtigen Form und eine im Validierungserinnerungstext? Gibt es einen Grund, warum ich das nicht tun sollte?

html forms labels

— ein Slum
quelle

Haben Sie versucht, was passiert? Wenn es funktioniert, glaube ich nicht, dass es Ihr Formular oder die Seite beschädigen würde. Und Sie erhalten ein Plus, da die Verwendung auf den Validierungsfehler klicken und sich auf das richtige Feld konzentrieren kann.

— Felipe Cypriano

Ich habe es nicht versucht, aber ich denke, es wird möglich sein. Ich empfehle die Verwendung jedoch nicht, da eine Beschriftung definiert, wofür das Feld bestimmt ist, eine Fehlermeldung jedoch nicht. Daher sollte ich für Validierungswarnungen kein Etikett verwenden.

— Guido Hendriks

Ist dies eine allgemeine Frage zum Design / zur Benutzerfreundlichkeit der Benutzeroberfläche?

— Jball

Ja. Es "funktioniert" ... aber gibt es einen Grund, warum dies schlechtes Design ist? Ich vermute, es könnte aus Gründen der Barrierefreiheit sein, aber für einen normalen Benutzer würde es die Sache einfacher machen, auf die Fehlermeldung zu klicken und in das durcheinandergebrachte Feld geführt zu werden ... Ich weiß nur nicht, ob es so sein wird "Leser für Sehbehinderte" oder ähnliches durcheinander bringen.

— Aslum

In einigen Fällen ist es einfacher, Ihr Steuerelement und Ihren Text in einem zu platzieren label. Sie können sogar die Attribute forund weglassen id. Die Spezifikation nennt diese implizite Zuordnung.

— Rybo111

Antworten:

158

Ich gehe davon aus, dass es sich bei dieser Frage um HTML-Formulare handelt. Aus der Spezifikation :

Das LABEL-Element kann verwendet werden, um Informationen an Steuerelemente anzuhängen. Jedes LABEL-Element ist genau einem Formularsteuerelement zugeordnet.

Somit kann jedes Formularsteuerelement von mehreren Beschriftungen referenziert werden, aber jedes Etikett kann nur auf ein Steuerelement verweisen. Wenn es also sinnvoll ist, ein zweites Etikett für ein Steuerelement zu haben (und in der von Ihnen beschriebenen Situation auch), können Sie gerne ein zweites Etikett hinzufügen.

— James Sumners
quelle

Es ist wirklich eher eine Frage der Benutzerfreundlichkeit / Zugänglichkeit als der HTML-Code. Das HTML funktioniert.

— Aslum

Wir sollten alle nur gültigen Code verwenden, sonst könnten die Dinge in der Zukunft oder für jemand anderen oder mit einer JS-Bibliothek oder was auch immer kaputt gehen.

— SHernandez

Die richtige Antwort ist Robs. Diese Lösung funktioniert für sehende Benutzer und schlägt bei einigen Bildschirmleseprogrammen fehl. Aslum, ich schätze, Sie haben die Antwort von jsummers oben akzeptiert, bevor Rob seine Antwort eingereicht hat.

— Käfig Rattler

@AvramLavinsky nein, dies ist die richtige Antwort auf "Kann ein Feld zwei Beschriftungen haben?" Die Spezifikation ist ziemlich klar. Wie Kunden dies interpretieren, liegt bei ihnen. Ihr Link zu "aria-descriptionby", der auf "aria-labelby" verweist, ist der Weg, um defekte Bildschirmleser zu "reparieren".

— James Sumners

Lustiger MDN sagt "Ein Eingang kann mehreren Beschriftungen zugeordnet werden." developer.mozilla.org/en-US/docs/Web/HTML/Element/label

— 2540625

Der HTML-Code ist legal und funktioniert (durch Klicken auf eine der Beschriftungen wird der Fokus auf das betreffende Feld übertragen).

Aus Gründen der Barrierefreiheit ist es etwas schwieriger, das Richtige zu tun.

Es ist kein "gängiger" Ansatz, und aus diesem Grund liest mindestens ein gängiger Bildschirmleser (den ich mit NVDA getestet habe) nur das erste Etikett, wenn Sie den Fokus in das Feld verschieben - zusätzliche Beschriftungen für dasselbe Feld werden ignoriert.

Wenn sich Ihre Fehlermeldung oben auf der Seite befindet, hört ein blinder oder sehbehinderter Benutzer, der durch die Felder tippt, nur die Fehlermeldung, wenn er auf dem betreffenden Feld landet, nicht das "echte" Etikett daneben.

Daher - wenn Sie die Fehlermeldung richtig formulieren, ist dies möglicherweise eine gute Sache (sicherlich besser, als nur das nicht validierende Feld rot hervorzuheben!).

— Rob Whelan
quelle

Dies ist richtig, und der richtige Weg, dies zu codieren, ist über das von aria beschriebene Attribut

— Cage Rattler

Ja, Sie können mehrere Beschriftungen auf dasselbe Formularsteuerelement verweisen lassen. Das ist völlig legal :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Dies ist nur ein Beispiel ... normalerweise würden Sie diese Zeilen mit einem Etikett umschließen, da sie nahe beieinander liegen.

— Gert Grenander
quelle

+1 für den Link zum Dokument, in dem eindeutig angegeben ist, dass " LABELmehrere Steuerelemente demselben Steuerelement zugeordnet werden können, indem mehrere Verweise über das forAttribut erstellt werden".

— Alexg