2.3.1. Cases à cocher simulées (checkboxes)

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 :

• Les <label> et leur contenu sont remplacés par du texte, celui qui était initialement associé aux <input type=“checkbox” />.
• Une image qui représente une case non cochée 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 de la case à cocher, par exemple, alt=“Non coché : ”.
• L’attribut role=“group” est appliqué sur le conteneur des cases à cocher. Il s’agit du <ul> dans l’exemple proposé.
• L’attribut role=“checkbox” est appliqué sur chacune des cases à cocher. Il s’agit des <li> dans l’exemple proposé.
• L’attribut 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.
• Les cases peuvent être cochées à la fois au clic et à la pression sur la touche Espace, lorsque le focus est positionné sur une case à cocher.
• L’attribut tabindex=“0” est appliqué sur chacune des cases à cocher simulées afin de permettre à ces dernières de recevoir le focus.
• 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">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>

• Démonstration en ligne de cases à cocher (checkboxes) simulées accessibles.