Label et image

Bonjour,

Petite question idéologique !
J'ai un formulaire avec 2 boutons radio, auxquels je dois associer 2 images. D'après le W3C et les bons procédés à appliquer, dois-je mettre mes balises img dans des label ou, étant donné que ce n'est pas du texte, dans des span (ou dans rien du tout après tout).
Il faut savoir également que j'ai un événement javascript qui me permet de cocher le bouton radio sur clic sur l'image correspondante, c'est donc un peu dommage de se passer des label mais c'est une question idéologique !

Merci par avance !

Bonjour,

Si j'ai bien compris l'idée, je ferais quelque chose de ce genre :

<input type="radio" id="Reponse1" name="Reponse" value="1" ...><label for="Reponse1"><img src="images/reponse1.png" alt="Texte alternatif pour l'image 1" /></label>

<input type="radio" id="Reponse2" name="Reponse" value="2" ...><label for="Reponse2"><img src="images/reponse2.png" alt="Texte alternatif pour l'image 2" /></label>

Le texte alternatif est important, car les images portent un sens. Si l'utilisateur désactive les images, il devrait quand même être en mesure de répondre au formulaire. Tout dépend évidemment du contexte.

En plus, avec l'utilisation du label et de l'attribut for couplé au id du champ, le Javascript n'est plus requis pour cocher le bouton radio au clic de l'image.
Modifié par Tony Monast (26 Mar 2009 - 19:11)

Bonjour,

J'ai remarqué un "bug" sous IE7 et IE6 (pas testé sous IE8) :
Le clic sur une image 'encapsulée' dans un label rattaché à son champ correspondant ne donne malheureusement pas le focus sur ce dernier.

Il faut donc bien passer par du javascript pour obtenir le résultat souhaité sur les navigateurs précédemment cités, à savoir, donner le focus au champ suite à un clic sur son étiquette.

Etant donné que tout le monde n'a pas javascript activé, dans un soucis de qualité "optimale", j'opterais pour une mise en forme de mon label via css et non pas en passant par une image.
Modifié par mecho (26 Mar 2009 - 21:05)

mecho a écrit :

Bonjour,
J'ai remarqué un "bug" sous IE7 et IE6 (pas testé sous IE8) :

Hello,
A priori, "bug" vérifié sos IE8
@+
Sylvain

mecho a écrit :
Bonjour,
J'ai remarqué un "bug" sous IE7 et IE6 (pas testé sous IE8) :
Le clic sur une image 'encapsulée' dans un label rattaché à son champ correspondant ne donne malheureusement pas le focus sur ce dernier.

En effet, je n'ai jamais pensé qu'un tel bug pouvait exister dans IE à ce sujet. N'empêche que la solution tient toujours, malgré la surcouche Javascript nécessaire pour IE.

a écrit :
N'empêche que la solution tient toujours, malgré la surcouche Javascript nécessaire pour IE.

Oui, la solution tient si on ne se souci pas de la compatibilité navigateurs ne respectant pas les standards ...

Et pourquoi ne pas placer les images en background dans les labels avec la désignation de ton bouton en text-indent négatif ?

Normalement, plus de bug comme ceci ...

Dans ce cas, les images ne sont pas vraiment considérées comme du contenu mais plutôt comme des éléments graphiques.
Donc, les intégrer en background et non dans des balises img me semble le mieux adapté.

oui, ... mais non :

Je ne sais plus de qui provient la citation qui suit mais elle est tellement vrai :
Dans ce cas précis :

a écrit :
l'image transporte une information, sa place est dans le code HTML. Et pour rendre l'information accessible si l'image ne peut être affichée, on utilise l'attribut alt de l'image. Il est là pour ça, et ça fonctionne parfaitement.

Il faut penser aux personnes qui décident de ne pas afficher les images pour des raisons de performances ou autres.

Donc je persiste et signe en préconisant et préférant l'accès de l'information au plus grand nombre en passant par un label explicite traité en html+css plutôt qu'à une technique javascript et/ou css via background qui n'apportera qu'une faible "plus-value" visuelle.
Modifié par mecho (27 Mar 2009 - 00:45)

sharky a écrit :
Et pourquoi ne pas placer les images en background dans les labels avec la désignation de ton bouton en text-indent négatif ?

Parce que, puor compléter la réponse de mecho, si l'utilisateur désactive les images mais pas le CSS, c'est la catastrophe.

Choisir de mettre des objets ergonomiques (boutons, liens, menus, etc) en image n'a rien d'idéologique.

Quand on a le choix entre ça
Version originale | Version traduite

et ça
Version originale | Version traduite => menu de nav à gauche

Ce n'est plus un choix qu'on propose mais une contrainte qu'on impose.
(je suis prêt à parier qu'il y a sur le web mondial globalement plus de visiteurs étrangers en trad que de visiteurs images désactivées... du coup pour consulter les liens du deuxième exemple suffit de désactiver les images = illustration directe du bien-fondé des alt, sauf qu'en full-text direct c'est quand même plus commode)
Modifié par Arsene (27 Mar 2009 - 09:42)