🆕 Demande de numéro de téléphone

Le bloc fonctionnel de “demande d’un numéro de téléphone” permet d’aider un utilisateur à saisir un numéro de téléphone.

Structure

Le champ téléphone est composé :

  • d’un label - obligatoire
  • et d’une description prĂ©cisant le format attendu - obligatoire
  • un input de type “tel” - obligatoire
  • un bloc de messages d’erreur/succès - optionnel
                <div class="fr-input-group">
    <label class="fr-label" for="tel-1">
        Numéro de téléphone
        <span class="fr-hint-text">Format attendu : (+33) 1 22 33 44 55</span>
    </label>
    <input class="fr-input" autocomplete="tel" aria-describedby="tel-1-message-error" id="tel-1422" type="tel">
    <div class="fr-messages-group" aria-live="assertive" id="tel-1-messages">
    </div>
</div>
                
              
Avec erreur :
  • ajouter la classe fr-input-group--error sur l’input-group
  • insĂ©rer le texte d’erreur dans un <p class="fr-message fr-message--error"> Ă  l’intĂ©rieur du messages-group

Le format de numéro de téléphone saisie n’est pas valide. Le format attendu est : (+33) 2 43 55 55 55

                <div class="fr-input-group fr-input-group--error">
    <label class="fr-label" for="tel-1">
        Numéro de téléphone
        <span class="fr-hint-text">Format attendu : (+33) 1 22 33 44 55</span>
    </label>
    <input class="fr-input" autocomplete="tel" aria-describedby="tel-1-message-error" id="tel-1422" type="tel">
    <div class="fr-messages-group" aria-live="assertive" id="tel-1-messages">
        <p class="fr-message fr-message--error">Le format de numéro de téléphone saisie n’est pas valide. Le format attendu est : (+33) 2 43 55 55 55</p>
    </div>
</div>
                
              

Bonnes pratiques

  • Veillez Ă  prĂ©ciser le format attendu en donnant un exemple de numĂ©ro de tĂ©lĂ©phone explicite
  • Le message d’erreur doit proposer un exemple de format diffĂ©rent de celui dans le label.
  • Utiliser l’attribut autocomplete="tel" sur l'input si la demande concerne un numĂ©ro international (avec indicateur).

Accessibilité

  • Le label doit ĂŞtre liĂ© Ă  l’input via l’attribut “for”.
  • 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.
  • L’input doit ĂŞtre liĂ© au groupe de messages via l’attribut aria-describedby.