it-swarm.com.de

Soll ich die Beschriftung vor oder nach dem Eingabeelement platzieren?

Ist es für sehbehinderte Benutzer, die einen Bildschirmleser verwenden, wichtig, ob das Etikett für ein Eingabesteuerelement vor oder nach der Eingabe angebracht wird?

Gibt es zum Beispiel einen Unterschied (was den Bildschirmleser betrifft) zwischen:

<label for="name">Name:</label>
<input id="name" />

und

<input id="name" />
<label for="name">Name:</label>

Ich bin ein Webentwickler, der normalerweise die erste Methode ausführt. Bei einigen neuen Effekten muss das Etikett jedoch nach der Eingabe stehen. Sie sind sich nicht sicher, wie Screenreader funktionieren - würden sie das Etikett für die Eingabe unabhängig von der Etikettenposition lesen, wenn es zur Eingabe gelangt? Würde es erklären, dass es hier ein Formularelement gibt, DANN lesen Sie das Etikett?

Ist es beim Umgang mit alternativen Anzeigen wichtig, ob die Beschriftung für ein Eingabesteuerelement vor oder nach der Eingabe platziert wird, und wenn ja, welche sollte es sein?

Wenn Sie für beide Elemente die richtige ID (eindeutiger Name, der nur für einen Satz von Eingaben/Beschriftungen verwendet wird) angeben, spielt die Reihenfolge der Elemente keine Rolle. Alternativ können Sie Aria verwenden, um die Eingabe folgendermaßen zu beschreiben:

<input aria-labelledby='id-of-my-label-located-elsewhere'>

9
maia

Während die Reihenfolge für die Entscheidung über die Etikettenposition von Bedeutung ist (ob das Etikett vor oder nach der Eingabe erscheinen soll), spielt es im Code keine Rolle, solange die IDs in id und for identisch sind - Eingabe und Beschriftung werden weiterhin verknüpft - siehe Beispiel zu diesem Geige .

Alternativ können Sie das <input> innerhalb der <label>:

<!-- nested, text before input -->
<label>Phone: <input id="phone" /></label>

<!-- nested, text after input -->
<label><input id="employed" type="checkbox" /> Employed?</label>
1
SNag