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
<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.