Label et image - Alsacreations

Des livres incontournables pour tout maîtriser

Auteur
branko_boskovic	# 26 Mar 2009, 18:39:03
1 Posts	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 !
1 Posts
Tony Monast	# 26 Mar 2009, 19:09:42
Fusionnez à froid! Modérateur 4131 Posts	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) Le bélier qui va foncer commence par reculer.
Fusionnez à froid! Modérateur 4131 Posts
Johan Ramon	# 26 Mar 2009, 21:05:24
180 Posts	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) twitter.com/johan_ramon
180 Posts
6l20	# 26 Mar 2009, 21:13:27
Les kiwis...quand je veux ! Modérateur 2276 Posts	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 XHTML: structure. CSS: présentation. Javascript: comportement.
Les kiwis...quand je veux ! Modérateur 2276 Posts
Tony Monast	# 26 Mar 2009, 21:58:27
Fusionnez à froid! Modérateur 4131 Posts	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. Le bélier qui va foncer commence par reculer.
Fusionnez à froid! Modérateur 4131 Posts
Johan Ramon	# 26 Mar 2009, 22:17:17
180 Posts	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 ... twitter.com/johan_ramon
180 Posts
sharky	# 27 Mar 2009, 00:24:55
77 Posts	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é.
77 Posts
Johan Ramon	# 27 Mar 2009, 00:43:11
180 Posts	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) twitter.com/johan_ramon
180 Posts
Laurie-Anne	# 27 Mar 2009, 08:40:01
Modérateur 6001 Posts	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. Non !
Modérateur 6001 Posts
Arsene	# 27 Mar 2009, 09:37:16
1205 Posts	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)
1205 Posts