Cases à cocher Dans un formulaire, les cases à cocher sont utilisées lorsque l’utilisateur doit faire un ou plusieurs choix parmi une liste d’options. Exemples Les exemples ci-dessous reproduisent les variantes des cases à cocher, en incluant celle avec une consigne et celle avec une aide à la saisie. Les champs en erreur peuvent être vus en laissant vides les cases et en cliquant sur Suivant. Étiquette de groupe de champs Texte pour consigne Choix A Choix B Choix C Étiquette de groupe de champs (facultatif) Texte d’aide à la saisie Choix A Choix B Choix C Cases à cocher avec option Autre Choix A Choix B Choix C Autre Veuillez préciser Laisser ce champ vide Accessibilité Style La bordure de la case à cocher doit avoir un taux de contraste de 3:1 avec l’arrière-plan, que son état soit coché ou décoché. Champ unitaire L’étiquette de la case à cocher doit être à proximité de la case à cocherL’étiquette de la case à cocher doit être codée dans une balise <label>La balise <label> doit être liée à la case à cocher Groupe de cases à cocher Une balise <fieldset> contient l’étiquette de groupe de champs et toutes les cases à cocherL’étiquette de groupe de champs doit être codée dans une balise <legend>La balise <legend> doit être le premier enfant de la balise <fieldset> Information complémentaire au champ Ne pas oublier que tout texte apportant de l’information complémentaire à une case à cocher (un signe de $, une consigne, le message d’erreur) doit y être lié. Pour ce faire, il faut : Ajouter l’attribut aria-describedby sur la case à cocherAjouter l’attribut id sur la balise contenant le texte (<p>, <span>, <div>)Lier l’attribut aria-describedby à l’attribut id (aria-describedby="id du texte") Il est très important, dans le cas d’une information liée au groupe de cases à cocher, d’ajouter l’attribut aria-describedby sur la balise <fieldset>, car l’information est liée au groupe et non à un champ.
