Comme son nom l’indique, cette balise sert à étiqueté un champs de formulaire, c’est à dire à créer un lien entre le champs et le sens de ce champs : le texte qu’il le décris.

A quoi ça sert ?

1. Souvent Toujours, la relation est évidente car le texte se trouve juste à côté, en tout cas graphiquement ce que ne voit pas une personne atteinte de handicap visuel !
2. Pour tout ceux qui possède un handicap moteur, c’est à dire tout ceux qui n’ont pas joué à Quake et autre FPS, atteindre un bouton radio en moins d’une seconde est véritable défit ! La balise <label> permet de cliquer sur le texte accompagnant pour cocher ou non un bouton radio ou une case à coché, ce qui va leur simplifier la vie !

Comment ça fonctionne :

<label for="yes" title="Oui">Oui</label>
<input type="radio" id="yes" name="test" />
<label for="no" title="Non">Non</label>
<input type="radio" id="no" name="test" />

Trace blanche dans un ciel bleu

Cela fait longtemps que j’utilise cette balise qui permet d’améliorer considérablement l’ergonomie d’une application sans pour autant être difficile à mettre en place et sans nécessiter l’approbation de qui que ce soit.

Plus d’explication ici : Comparaison graphique entre Windows et Linux.

Cependant, les produits de Google sont d’une qualité remarquable en terme d’ergonomie et de richesse fonctionnelle. La raison ? l’application de quelques règles d’Expérience Utilisateur dont voici un résumé en français :

1. Se concentrer sur les utilisateurs, leur vie, leur travail, leur rêve.
2. Le moindre millième de seconde compte.
3. Simplicité = Puissance.
4. Accueillant aux débutant et attractifs aux experts.
5. Oser innover.
6. Concevoir pour tout le monde.
7. Gérer les problèmes actuelles et prévoir ceux de demain.
8. Satisfaire l’œil sans distraire l’esprit.
9. Ne pas abuser de la confiance des utilisateurs.
10. Être humain.

Cette article peut s’avérer être une bonne source d’inspiration dans la réalisation d’interface Homme/Machine.