Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

2.3.2. Boutons radio simulés

Principe

Les boutons radio dits “simulés” n’utilisent pas les éléments de formulaires proposés par défaut par HTML, à savoir les champs <input type=“radio” />. Ce choix est souvent lié à des raisons esthétiques.

Contrairement aux checkboxes qui autorisent des choix multiples, un seul bouton radio peut être activé à la fois par groupe de boutons radio.

Code HTML de base

Le code HTML de base utilise les boutons radio classiques :

<form action="index.html" method="post">
    <h2 id="question">Quelle est la couleur du cheval blanc d'Henri IV ?</h2>
 
    <ul id="reponses">
        <li class="choix">
            <label for="jaune">
                <input type="radio" name="couleur-cheval-henri-iv" id="jaune" />
                Jaune
            </label>
        </li>
        <li class="choix">
            <label for="vert">
                <input type="radio" name="couleur-cheval-henri-iv" id="vert" />
                Vert
            </label>
        </li>
        <li class="choix">
            <label for="blanc">
                <input type="radio" name="couleur-cheval-henri-iv" id="blanc" />
                Blanc
            </label>
        </li>
    </ul>
 
    <input type="submit" value="Transmettre les informations" />
</form>

Sans JavaScript, un formulaire classique est proposé à l’utilisateur.

Comportement avec JavaScript

Avec JavaScript, le comportement des boutons radio simulés doit être le même que celui des boutons radio classiques.

Les scripts doivent gérer les points suivants :

  • Les <label> et leur contenu sont remplacés par du texte, celui qui était initialement associé aux <input type=“radio” />.
  • Une image qui représente un bouton radio coché est rajoutée avant chaque étiquette. Les caractéristiques techniques de cette image sont les suivantes :
    • Un attribut aria-hidden=“true” est appliqué sur l’image pour la masquer aux utilisateurs de lecteurs d’écran.
    • L’attribut alt de l’image décrit l’état du bouton radio, par exemple, alt=“Non coché : ”.
  • L’attribut role=“radiogroup” est appliqué sur le conteneur des boutons radio. Il s’agit du <ul> dans l’exemple proposé.
  • L’attribut role=“radio” est appliqué sur chacun des boutons radio. Il s’agit des <li> dans l’exemple proposé.
  • L’attribut aria-checked=“false” est appliqué sur chacun des boutons radio par défaut. La valeur de cet attribut change ensuite dynamiquement : true lorsque le bouton radio est coché et false dans le cas contraire.
  • Les boutons radio peuvent être cochés à la fois au clic et à la pression sur la touche Espace, lorsque le focus est positionné sur un bouton radio.
  • Par défaut, l’attribut tabindex=“0” est appliqué sur le premier et le dernier bouton radio du groupe, afin de permettre l’entrée du focus dans le groupe de boutons radio à la fois dans l’ordre de lecture classique et dans l’ordre inverse. L’attribut tabindex=”-1” est appliqué sur les autres boutons radio afin d’en interdire par défaut l’accès au clavier.
  • Dès lors qu’un bouton radio est coché, l’attribut tabindex de ce bouton passe à 0 tandis que la valeur du tabindex passe à -1 pour le reste des boutons du groupe.
  • Lorsque le focus est positionné sur l’un des boutons radio :
    • Appuyer sur la touche Flèche haut ou Flèche gauche déplace le focus et coche le bouton radio précédent. Si le focus était positionné au niveau du premier bouton du groupe au moment de l’action, c’est le dernier bouton du groupe qui est coché.
    • Appuyer sur la touche Flèche bas ou Flèche droite déplace le focus et coche le bouton radio suivant. Si le focus était positionné au niveau du dernier bouton du groupe au moment de l’action, c’est le premier bouton du groupe qui est coché.
  • Enfin, si les cases à cocher sont précédées d’une question, d’une indication, ou d’une quelconque mention importante à la compréhension de la fonction de ces dernières, l’attribut aria-labelledby est appliqué sur le conteneur des cases à cocher. La valeur de cet attribut reprend la valeur de l‘id associé à la question, l’indication, etc.

Le code ainsi obtenu avec JavaScript sera le suivant :

<form method="post" action="index.html">
    <h2 id="question">Quelle est la couleur du cheval blanc d'Henri IV ?</h2>
 
    <ul id="reponses" role="radiogroup" aria-labelledby="question">
        <li class="choix" role="radio" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/bouton-radio-neutre.png" alt="Non coché : ">
            Jaune
        </li>
        <li class="choix" role="radio" aria-checked="false" tabindex="-1">
            <img aria-hidden="true" src="images/bouton-radio-neutre.png" alt="Non coché : ">
            Vert            
        </li>
        <li class="choix" role="radio" aria-checked="false" tabindex="0">
            <img aria-hidden="true" src="images/bouton-radio-neutre.png" alt="Non coché : ">
            Blanc            
        </li>
    </ul>
 
    <input type="submit" value="Transmettre les informations">
</form>

Démonstration

notices/interfaces-riches-javascript/boutons-radio-simules.txt · Dernière modification: Le 24/01/2014 à 16:57 par Régis Lapeze
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :