Les checkboxes simulées sont des cases à cocher dites “simulées” car elles n’utilisent pas les éléments de formulaires proposés par défaut par HTML, à savoir les champs <input type=“checkbox” />
. Ce choix est souvent lié à des raisons esthétiques.
Le code HTML de base utilise les cases à cocher classiques :
<form action="index.html" method="post"> <h2 id="question">Quel sport pratiquez-vous ?</h2> <ul id="reponses"> <li class="choix"> <label for="peche"> <input type="checkbox" name="peche" id="peche" /> La pêche </label> </li> <li class="choix"> <label for="polo"> <input type="checkbox" name="polo" id="polo" /> Le polo </label> </li> <li class="choix"> <label for="diabolo"> <input type="checkbox" name="diabolo" id="diabolo" /> Le diabolo </label> </li> </ul> <input type="submit" value="Transmettre les informations" /> </form>
Sans JavaScript, un formulaire classique est proposé à l’utilisateur.
Avec JavaScript, le comportement des checkboxes simulées doit être le même que celui des cases à cocher classiques.
Les scripts doivent gérer les points suivants :
<label>
et leur contenu sont remplacés par du texte, celui qui était initialement associé aux <input type=“checkbox” />
.aria-hidden=“true”
est appliqué sur l’image pour la masquer aux utilisateurs de lecteurs d’écran.alt
de l’image décrit l’état de la case à cocher, par exemple, alt=“Non coché : ”
.role=“group”
est appliqué sur le conteneur des cases à cocher. Il s’agit du <ul>
dans l’exemple proposé.role=“checkbox”
est appliqué sur chacune des cases à cocher. Il s’agit des <li>
dans l’exemple proposé.aria-checked=“false”
est appliqué sur chacune des cases à cocher par défaut. La valeur de cet attribut change ensuite dynamiquement : true
lorsque la case est cochée et false
dans le cas contraire.Espace
, lorsque le focus est positionné sur une case à cocher.tabindex=“0”
est appliqué sur chacune des cases à cocher simulées afin de permettre à ces dernières de recevoir le focus.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">Quel sport pratiquez-vous ?</h2> <ul id="reponses" role="group" aria-labelledby="question"> <li class="choix" role="checkbox" aria-checked="false" tabindex="0"> <img aria-hidden="true" src="images/checkbox-neutre.png" alt="Non coché : "> La pêche </li> <li class="choix" role="checkbox" aria-checked="false" tabindex="0"> <img aria-hidden="true" src="images/checkbox-neutre.png" alt="Non coché : "> Le polo </li> <li class="choix" role="checkbox" aria-checked="false" tabindex="0"> <img aria-hidden="true" src="images/checkbox-neutre.png" alt="Non coché : "> Le diabolo </li> </ul> <input type="submit" value="Transmettre les informations"> </form>