Remplacer un bouton radio par une image cliquable

Bonjour,

j'ai actuellement :
. un bouton radio du type :

<input id="1" class="form-radio" type="radio" value="john@doe.com" name="avis" required="required">
<label class="option" for="edit-avis">1 </label>

. une image qui correspond à chaque bouton du type :

<img src="/image.png">

comment substituer le bouton radio par l'image, bien sûr en conservant les fonctionnalités du bouton radio, ?
Modifié par corbintheone (10 Sep 2015 - 15:45)

C'est faisable en javascript, mais ce n'est pas simple à réaliser. IL y a beaucoup d'aspects à prendre en compte si tu veux vraiment aller jusqu'au bout et proposer une substitution qui soit de bonne qualité.

Tu devras envoyer ton formulaire par javascript ou faire en sorte que l'état du radio soit reporté dans un champ caché. Si tu n'utilises pas déjà AJAX pour ce formulaire, ça va le changer radicalement car il est probable que tu sois obligé d'y passer.

Pour que ça reste accessible, il faut utiliser ARIA. IL faut aussi faire en sorte qu'on puisse atteindre et basculer l'état du bouton uniquement avec le clavier (typiquement ça se fait avec la touche espace). Tout cela est implicite quand on utilise un bouton radio standard, mais ne l'est pas quand on veut programmer ses propres composants.
IL faut aussi faire attention à ce que les deux images utilisées soient suffisament distingables.

IL y a probablement des scripts qui font 75% de ce que tu demandes, mais pose-toi la question si c'est vraiment indispensable et si ça vaut vraiment la peine.

Tout d'abord, merci de ta réponse.

Comme je l'indiquai, j'ai déjà une image et un bouton radio qui lui correspond; et, évidemment, plusieurs couples bouton/image dans une question.
Le questionnaire étant sur androïd, je me suis aperçu en test que les utilisateurs "cliquaient" l'image plutôt que le bouton radio => d'où la nécessité

En revanche, d'après ce que tu me décris, ça a l'air d'être une usine à gaz .. d'autant plus sans doute que j'utilise le module webform de Drupal. (en l'occurrence, c'est plutôt "que tu décries" )

Quant à ARIA, je ne sais même pas ce que c'est !

Bonjour,

Pour moi, je ne vois rien de compliquer là-dedans, tout simplement coller ton image dans le label correspondant à ton bouton radio :

<form action="#">
    <input type="radio" name="radio-choice" id="radio-choice-1" />
    <label for="radio-choice-1"><img src="http://lorempixel.com/200/200/cats/3" alt="" /></label>

    <input type="radio" name="radio-choice" id="radio-choice-2" />
    <label for="radio-choice-2"><img src="http://lorempixel.com/200/200/cats/4" alt="" /></label>
  <div>
    <input type="submit" value="Valider" />
  </div>
</form>

Et ensuite, il te suffit juste de faire un display:none en CSS sur les boutons <radio>
Après au niveau de l'ARIA je n'y connais rien, mais ce doit être standard je pense (Quentin je te laisse confirmer ça ou pas)

EDIT : j'ai oublié un retour visuel, un truc du genre par exemple :

input[type="radio"]:checked+label img {
  outline: 3px solid #0f0;
} 

Modifié par SolidSnake (11 Sep 2015 - 07:49)

a écrit :
Et ensuite, il te suffit juste de faire un display:none en CSS sur les boutons <radio>

L'idée de masquer les radio à la'ffichage est bien vue, je n'y avais pas pensé. Par contre, surtout pas avec display:none !

Tu peux les envoyer hors écran si tu veux avec un truc du genre text-indent: -1000000px, mais pas display:none.

D'abord pour les lecteurs d'écran, qui ne verront plus le bouton avec display:none;
Ensuite pour les utilisateurs du clavier, qui ne pourront plus non plus utiliser le bouton, puisqu'il aura totalement disparu. En outre si tu le mets hors-écran, il faut prévoir une façon dindiquer le focus autrement et tu te risques peut-être à des bugs bizarroïdes avec certains navigateurs.

a écrit :
Après au niveau de l'ARIA je n'y connais rien, mais ce doit être standard je pense (Quentin je te laisse confirmer ça ou pas)

Si tu utilises des boutons standard <input type="radio" /> alors oui, les rôles et états ARIA associés sont implicites et automatiques. Mais si le bouton est masqué avec display:none, il disparaît complètement pour tout le monde donc ce n'est pas ce qu'il faut faire.


Autre remarque bonus, si le label est constitué uniquement d'une image, l'alt ne doit surtout pas être vide.

QuentinC a écrit :
"Et ensuite, il te suffit juste de faire un display:none en CSS sur les boutons &lt;radio&gt;"

L'idée de masquer les radio à l'affichage est bien vue, je n'y avais pas pensé. Par contre, surtout pas avec display:none !

Tu peux les envoyer hors écran si tu veux avec un truc du genre text-indent: -1000000px, mais pas display:none.

D'abord pour les lecteurs d'écran, qui ne verront plus le bouton avec display:none;
Ensuite pour les utilisateurs du clavier, qui ne pourront plus non plus utiliser le bouton, puisqu'il aura totalement disparu. En outre si tu le mets hors-écran, il faut prévoir une façon d'indiquer le focus autrement et tu te risques peut-être à des bugs bizarroïdes avec certains navigateurs.

--->J'ai une utilisation très particulière : l'accès ne se fera que par des tablettes.

QuentinC a écrit :
"Après au niveau de l'ARIA je n'y connais rien, mais ce doit être standard je pense (Quentin je te laisse confirmer ça ou pas)"

Si tu utilises des boutons standard &lt;input type="radio" /&gt; alors oui, les rôles et états ARIA associés sont implicites et automatiques. Mais si le bouton est masqué avec display:none, il disparaît complètement pour tout le monde donc ce n'est pas ce qu'il faut faire.

---> pour ce qui est d'ARIA, j'ai trouvé ceci, puisque je ne suis manifestement pas le seul à ne pas connaître.

QuentinC a écrit :
Autre remarque bonus, si le label est constitué uniquement d'une image, l'alt ne doit surtout pas être vide.

--->Non, j'ai aussi un texte.