web-dev-qa-db-fra.com

Dois-je mettre l'étiquette avant ou après l'élément d'entrée?

Pour les utilisateurs malvoyants utilisant un lecteur d'écran, est-il important que l'étiquette d'un contrôle d'entrée soit placée avant ou après l'entrée?

Par exemple, existe-t-il une différence (en ce qui concerne le lecteur d'écran) entre:

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

et

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

Je suis un développeur Web qui utilise généralement la première méthode, mais certains nouveaux effets nécessitent que l'étiquette soit après l'entrée. Vous ne savez pas comment fonctionnent les lecteurs d'écran - liraient-ils l'étiquette de l'entrée quelle que soit la position de l'étiquette lorsqu'elle est arrivée à l'entrée? Cela expliquerait-il qu'il y ait un élément de formulaire ici, PUIS lire l'étiquette?

Pour les affichages alternatifs, importe-t-il si l'étiquette d'un contrôle d'entrée est placée avant ou après l'entrée, et si oui, laquelle devrait-elle être?

formsaccessibilityhtmllabels
6
Richard Parnaby-King

Si vous incluez l'ID correct (nom unique, utilisé uniquement sur 1 jeu d'entrée/étiquette) pour les deux éléments, l'ordre des éléments n'a pas d'importance. Alternativement, vous pouvez utiliser aria pour décrire l'entrée comme ceci:

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

9
maia

Alors que l'ordre est important pour décider de la position de l'étiquette (si l'étiquette doit apparaître avant ou après l'entrée), cela n'a pas d'importance dans le code tant que les ID dans id et for sont les mêmes - l'entrée et l'étiquette seront toujours liées - voir l'exemple à ce sujet violon .

Vous pouvez également envelopper le <input> à l'intérieur de <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