Groupe de champs (fieldset) Dans un formulaire, un groupe de champs (fieldset) est utilisé pour regrouper plusieurs champs qui ont une relation entre eux. Dans cette page Description de fieldset et de mini-fieldsetFieldsetMini-fieldsetErreurs Description de fieldset et de mini-fieldset Un fieldset est composé d’une légende (<legend>) qui chapeaute un regroupement de champs (<input>) coiffés d’étiquettes (<label>). Visuellement, les fieldsets et les mini-fieldsets dans le site Web de la RAMQ, volet Citoyens sont présentés de plusieurs façons. Les différences se situent au niveau des styles attribués aux légendes et aux étiquettes des champs. Fieldset Légende du fieldset 1 À moins d’une indication contraire, vous devez remplir tous les champs. Étiquette 1 Étiquette 2 Légende d’un fieldset avec une aide à la saisie (facultatif) Une aide à la saisie apporte une précision complémentaire à la légende d’un fieldset. Étiquette 3 Étiquette 4 Leave this field blank Mini-fieldset Légende du fieldset 1 À moins d’une indication contraire, vous devez remplir tous les champs. Étiquette 1 Étiquette 2 Légende du mini fieldset 2 Texte d’aide à la saisie Étiquette 3 Étiquette 4 (facultatif) Mini fieldset - Numéro de téléphone Indiquez un numéro pour vous joindre la semaine entre 8 h 30 et 16 h 30. Numéro Poste (facultatif) Leave this field blank Erreurs Deux approches peuvent être utilisées pour signaler des erreurs impliquant l’utilisation de fieldsets ou de mini-fieldsets. Approche 1 : si une erreur concerne l’ensemble d’un fieldset, l’état « en erreur » s’applique à la totalité du fieldset, y compris la légende, et s’affiche ainsi : Approche 2 : si une erreur peut être reliée à un champ en particulier à l’intérieur d’un fieldset, l’état « en erreur » ne s’applique que sur le champ en erreur, et s’affiche ainsi : Accessibilité Il y a 2 approches possibles pour les groupes de champs : Approche 1 – Groupe de champs avec titre (section de formulaire) Une balise <fieldset> contient le titre de la section ainsi que tous les champs de la sectionLe titre doit être codé dans une balise <h(n)> suivant l’ordre hiérarchique des titres de la pageLa balise <h(n)>possède l’attribut idLa balise <fieldset> possède l’attribut aria-labelledby qui est lié à l’attribut id du titre (aria-labelledby="id du titre") Les fieldset, dans la majorité des cas, se basent sur l’approche 1 lorsqu’ils regroupent une section. Approche 2 – Groupe de champs avec étiquette (regroupement) Une balise <fieldset> contient la légende ainsi que tous les champs du regroupement de champsLa légende doit être codée dans une balise <legend> et doit être le premier enfant de la balise <fieldset> Les mini-fieldset, dans la majorité des cas, se basent sur l’approche 2. Dans les 2 approches Dans les 2 cas, les consignes doivent être liées au <fieldset> par un attribut aria-describedby. Si l’erreur est reliée au groupe de champs et non à un champ seul, le message d’erreur doit être lié au <fieldset> par un attribut aria-describedby. Il faut également ajouter l’attribut aria-invalid="true" sur la balise <fieldset>. Ne pas confondre aria-labelledby et aria-describedby. Le 1er signifie que l’élément est libellé, on fait donc référence à un libellé ou un titre. Le 2e signifie qu’il est décrit, on fait donc référence à un texte, un paragraphe.
