it-swarm.com.de

Kann ein Eingabefeld zwei Bezeichnungen haben?

Mary hatte eine kleine Form und ihre Felder waren nur so beschriftet.
Immer wenn sich ein Fehler einschlich, kam Verwirrung auf.

Ich habe für jedes Eingabefeld eine Beschriftung ... 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 Bezeichnungen für dasselbe Eingabefeld haben? Eine im eigentlichen Formular und eine im Erinnerungstext für die Validierung? Gibt es einen Grund, warum ich das nicht tun sollte?

116
aslum

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.

Daher kann jedes Formularsteuerelement von mehreren Beschriftungen referenziert werden, aber jede Beschriftung kann nur auf ein Steuerelement verweisen. Wenn es also Sinn macht, eine zweite Beschriftung für ein Steuerelement zu haben (und in der von Ihnen beschriebenen Situation auch), können Sie eine zweite Beschriftung hinzufügen.

136
James Sumners

Der HTML-Code ist legal und funktioniert (wenn Sie auf eine der Beschriftungen klicken, wird der Fokus auf das betreffende Feld gelegt).

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

Es ist kein "gewöhnlicher" Ansatz, und aus diesem Grund liest mindestens ein gewöhnlicher Bildschirmleser (ich habe ihn mit NVDA getestet) das erste Etikett nur, wenn Sie den Fokus in das Feld verschieben - zusätzliche Etiketten 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, und 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 in Rot hervorzuheben!).

35
Rob Whelan

Ja, Sie können mehrere Beschriftungen auf dasselbe Formularsteuerelement zeigen lassen. Das ist vollkommen 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 umbrechen, da sie nahe beieinander liegen.

24
Gert Grenander

Obwohl legal, ist es nicht die beste Möglichkeit, mehrere Labels mit einem einzelnen <input> - Element zu verknüpfen. Verwenden Sie stattdessen das Attribut aria-labelledby .

Zuerst geben Sie den <label> - Elementen eindeutige id -Attribute. Anschließend platzieren Sie ein Attribut aria-labelledby In das Element <input> Und setzen dessen Wert auf die Werte id aus den Elementen <label>, Die durch ein Leerzeichen getrennt sind.

Hier ist das Beispiel von der Seite "Verwenden des Attributs aria-labelledby" in den MDN-Webdokumenten:

<div id="billing">Billing</div>

<div>
    <div id="name">Name</div>
    <input type="text" aria-labelledby="billing name"/>
</div>
<div>
    <div id="address">Address</div>
    <input type="text" aria-labelledby="billing address"/>
</div>
0
John S