🆕 Demande de civilité

Le bloc fonctionnel “Demande de civilité” permet à un utilisateur de renseigner sa civilité ou la façon dont il souhaite être appelé.

Il doit être utilisé lorsque votre service nécessite de demander une détermination du sexe, un titre d’appel ou situation familiale.

Les différents informations que l’on peut récolter avec ce bloc

Demande du sexe

Ce bloc se compose de :

  • Un fieldset contenant
    • Une lĂ©gende
    • 2 Ă©lĂ©ments de fieldset contant un bouton radio
    • Un bloc de messages (facultatif)
Sexe

                    <fieldset class="fr-fieldset" role="group" aria-describedby="sex-1427-fieldset-legend sex-1427-fieldset-messages" id="sex-1427-fieldset">
    <legend class="fr-fieldset__legend" id="sex-1427-fieldset-legend">
        Sexe
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-radio-group">
            <input type="radio" id="sex-female-1428" name="sex">
            <label class="fr-label" for="sex-female-1428">
                Feminin
            </label>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-radio-group">
            <input type="radio" id="sex-male-1429" name="sex">
            <label class="fr-label" for="sex-male-1429">
                Masculin
            </label>
        </div>
    </div>
    <div class="fr-messages-group" assert-live="assertive" id="sex-1427-fieldset-messages">
    </div>
</fieldset>
                    
                  

Demande d'une situation familiale

Ce bloc se compose de :

  • Un fieldset contenant
    • Un Ă©lĂ©ment de fieldset contenant un select
    • Un bloc de messages (facultatif)

                    <fieldset class="fr-fieldset" aria-label="Demande de situation familiale" aria-describedby="civility-family-1432-fieldset-messages">
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label for="family-select-1" class="fr-label">
                Situation familiale
            </label>
            <select class="fr-select" id="family-select-1" name="family">
                <option value="" selected disabled hidden>SĂ©lectionner une option</option>
                <option value="1">CĂ©libataire</option>
                <option value="2">Concubinage</option>
                <option value="3">Pacsé</option>
                <option value="4">Marié</option>
                <option value="5">Veuf</option>
                <option value="6">Divorcé</option>
                <option value="7">Sans réponse</option>
            </select>
        </div>
    </div>
  
    <div class="fr-messages-group" assert-live="assertive" id="civility-family-1432-fieldset-messages">
    </div>
</fieldset>
                    
                  

Demande du titre d'appel

Si le nombre de titre d’appel est réduit, utiliser des boutons radios :

                    <fieldset class="fr-fieldset" aria-label="Demande du titre d’appel" aria-describedby="civility-honorific-1-messages">
    <div class="fr-fieldset__element">
        <div class="fr-radio-group">
            <input type="radio" id="honorific-1438" name="honorific">
            <label class="fr-label" for="honorific-1438">
                Docteur
            </label>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-radio-group">
            <input type="radio" id="honorific-1439" name="honorific">
            <label class="fr-label" for="honorific-1439">
                Inspecteur
            </label>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-radio-group">
            <input type="radio" id="honorific-1440" name="honorific">
            <label class="fr-label" for="honorific-1440">
                Sans réponse
            </label>
        </div>
    </div>
    <div class="fr-messages-group" aria-live="assertive" id="civility-honorific-1-messages">
    </div>
</fieldset>
                    
                  

Si le nombre de titre d’appel est supérieur à 4-5, utiliser un select :

                    <fieldset class="fr-fieldset" aria-label="Demande du titre d’appel" aria-describedby="civility-honorific-2-messages">
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label for="honorific-select-1" class="fr-label">
                Titre d’appel
            </label>
            <select class="fr-select" id="honorific-select-1" name="honorific">
                <option value="" selected disabled hidden>SĂ©lectionner une option</option>
                <option value="1">Recteur</option>
                <option value="2">Inspecteur</option>
                <option value="3">Proviseur</option>
                <option value="4">Professeur</option>
                <option value="5">Docteur</option>
                <option value="6">Principal</option>
                <option value="7">Sans réponse</option>
            </select>
        </div>
    </div>
    <div class="fr-messages-group" aria-live="assertive" id="civility-honorific-2-messages">
    </div>
</fieldset>
                    
                  

Bonnes pratiques

La demande de civilité binaire “madame”/”monsieur” est souvent mal utilisée et ne permet pas de récupérer correctement les informations attendus, la civilité n’est pas le sexe, le statut marital, l’état civil ou le titre.

Il est nécessaire d’expliquer pourquoi les informations sont recueillies. Le partage de ses informations peut être stressant pour les utilisateurs, voir perçu comme intrusif.

La demande de civilité peut-être un sujet sensible pour les utilisateurs, elle doit donc se faire :

  • seulement si cela est nĂ©cessaire
  • de manière pĂ©dagogique, en expliquant pourquoi le service a besoin de cette information via l’utilisation du texte description
  • avec de la rĂ©assurance sur la caractère sĂ»re, anonyme et sĂ©curisĂ© de la donnĂ©e

Accessibilité

  • Il est obligatoire d’avoir soit une lĂ©gende, soit un attribut aria-label sur le fieldset
  • Le fieldset doit ĂŞtre liĂ© Ă  la lĂ©gende, si elle existe, et au groupe de messages via l’attribut aria-describedby (dans l’ordre : id-legend puis id-messages), ajouter un role=”group” s’il y a plus d’un id dans l'aria-describedby
  • Les messages d’erreur ou de validation doivent ĂŞtre placĂ©s dans le bloc vide fr-messages-group. Celui-ci possède l’attribut aria-live="assertive" pour annoncer les messages ajoutĂ©s Ă  la volĂ©e aux lecteurs d'Ă©crans.
  • Reprendre les Ă©lĂ©ments liĂ©s aux boutons radios