Comment baliser sémantiquement des informations supplémentaires dans un champ d'entrée et d'étiquette

Question

J'ai une description supplémentaire label et un champ input.

Je suis un peu incertain si la description supplémentaire appartient au champ d'étiquette enveloppé dans une période comme celle-ci:

<label for="phone"> 
    Telephone 
    <span>For the delivery</span> 
</label> 
<input type="text" name="phone"> 

De cette façon, la description est cliquable. Mais je ne suis pas sûr si c'est l'approche correcte avec tout à l'esprit et le balisage sémantique.

Les informations supplémentaires appartiennent-elles à l'étiquette ou doivent-elles être séparées et comment doivent-elles être formatées?

Answer 1

D'abord, j'Assigner toujours le <label> au id du champ au lieu de son name (particulièrement important pour les boutons radio et cases à cocher):

<label for="phone"> 
Telephone 
<span>For the delivery</span> 
</label> 
<input type="text" name="phone" id="phone"> 

Votre approche n'est pas mal. Si vous êtes préoccupé par verbosité pour les lecteurs d'écran (peut-être à la suite des tests utilisateurs), vous pouvez mélangez qu'un peu et utilisez aria-describedby:

<label for="phone"> 
Telephone 
</label> 
<span id="phoneAddl">For the delivery</span> 
<input type="text" name="phone" id="phone" aria-describedby="phoneAddl"> 

aria-describedby il associe toujours avec le terrain, mais annonce après le champ et avec une brève pause. Il n'a aucun effet sur autre chose qu'un lecteur d'écran.

Mais à votre point sur la plus grande zone de clic, et étant donné que sémantiquement il est bon de le laisser dans le <label>, je voudrais juste le laisser là comme dans votre exemple. Cela signifie également que vous ne comptez pas sur ARIA pour faire le travail d'un élément natif (bien que ce ne soit pas tout à fait faire la même chose).