HOWTO · HTML
Créer des liens de numéro de téléphone en HTML
Apprenez à créer en HTML un lien de numéro de téléphone cliquable, à mettre en forme le numéro affiché et à définir des attentes réalistes quant au comportement des appareils et à l'accessibilité.
Sur cette page
Utilisez une ancre HTML avec un URI tel: pour rendre un numéro de téléphone activable depuis une page Web. Les visiteurs peuvent sélectionner le lien pour ouvrir une application de numérotation ou un autre service d’appel disponible sur leur appareil ; le lien ne passe pas d’appel à lui seul. Cette méthode est utile sur une page de contact où vous souhaitez permettre aux visiteurs de joindre une entreprise par téléphone.
Fonctionnement des liens vers un numéro de téléphone
Un lien téléphonique est un élément d’ancre dont l’attribut href commence par tel: et contient le numéro à composer. Le texte placé entre les balises de l’ancre est le libellé visible et activable. La valeur de destination et le texte affiché peuvent différer : la première indique le numéro à composer, tandis que le second aide les visiteurs à reconnaître le lien.
Créer un lien téléphonique cliquable
Par exemple, ce code HTML intégré crée un lien libellé « Call customer support » : <a href="tel:+1234567890">Call customer support</a>. Remplacez +1234567890 par le numéro de l’entreprise dans le format de numérotation approprié, et choisissez un libellé qui indique aux visiteurs qui ils pourront joindre ou ce qu’ils pourront contacter. Le libellé anglais est donné à titre d’illustration ; remplacez-le par un texte français sur une page en français.
Le code JavaScript autonome suivant stocke une ancre de même structure sous forme de chaîne. Son libellé reste en anglais (« Call customer support ») pour conserver le code requis ; localisez-le si vous utilisez cet exemple sur une page en français. Ce code est utile lorsqu’une application doit construire la valeur HTML ; une page Web classique peut utiliser directement l’ancre.
const phoneLink = '<a href="tel:+1234567890">Call customer support</a>';
console.log(phoneLink);
<a href="tel:+1234567890">Call customer support</a>
Formater le numéro pour en faciliter la lecture et les appels internationaux
Choisissez pour le numéro dans href un format adapté aux personnes susceptibles d’appeler et aux règles de numérotation applicables. Pour les appels internationaux, incluez l’indicatif du pays lorsque cela est nécessaire pour que la destination soit sans ambiguïté. L’indicatif du pays n’est pas indispensable dans tous les contextes ni pour tous les publics.
Pour faciliter la lecture, le libellé visible peut comporter des espaces, des parenthèses ou des traits d’union familiers. Par exemple, le lien peut afficher (234) 567-8901 tandis que sa valeur href utilise tel:+12345678901. Les séparateurs aident à parcourir le numéro ; ils ne sont pas obligatoires dans le texte visible. Veillez à ce que le numéro à composer et sa présentation destinée aux lecteurs soient clairs et cohérents.
Que se passe-t-il lorsqu’une personne active le lien ?
Lorsqu’un visiteur active un lien tel:, l’appareil ou le navigateur peut ouvrir une application de numérotation ou un autre service d’appel configuré, avec le numéro prêt à être utilisé. En général, le visiteur choisit ensuite s’il souhaite passer l’appel. Sur un ordinateur, une application d’appel peut prendre en charge le lien si elle est configurée ; sinon, le comportement dépend du navigateur et des logiciels disponibles. Ne supposez pas que tous les appareils ouvrent la même interface.
Conseils d’accessibilité et de test
Utilisez un libellé descriptif, comme « Appeler le service client », plutôt qu’un libellé vague comme « Appeler » lorsque le lien nécessite davantage de contexte. Cela aide les personnes qui parcourent les liens à l’aide d’une technologie d’assistance, ainsi que les visiteurs qui consultent la page sans son texte environnant. Vérifiez que le lien est accessible au clavier et que son style visuel permet de le reconnaître comme un lien.
Testez le lien sur les appareils, navigateurs et applications d’appel pertinents pour votre public. Vérifiez que le numéro affiché est lisible, que href contient le numéro prévu et que l’activation propose le service attendu. Ces vérifications permettent de repérer les erreurs de formatage et les différences de comportement entre appareils avant que les visiteurs utilisent la page de contact.
Questions fréquentes sur les liens vers un numéro de téléphone
Le numéro affiché peut-il contenir des parenthèses ou des traits d’union ?
Oui. Utilisez des séparateurs familiers dans le texte visible s’ils facilitent la lecture du numéro. Veillez à ce que la destination tel: soit adaptée à la numérotation ; ne comptez pas sur le texte visible pour définir la destination.
Les liens téléphoniques fonctionnent-ils dans les navigateurs de bureau ?
Ils peuvent fonctionner si le navigateur ou le système d’exploitation dispose d’un service d’appel configuré. Sans ce service, un ordinateur ne proposera peut-être aucune action utile ; vérifiez donc les environnements utilisés par vos visiteurs.
Que vérifier si le lien ne fonctionne pas ?
Vérifiez l’écriture de l’ancre, le préfixe tel: et le numéro dans href. Activez ensuite le lien sur un appareil pertinent et vérifiez si une application de numérotation ou d’appel est disponible. Le comportement peut varier selon les paramètres de l’appareil et les logiciels installés.
Chaque lien téléphonique doit-il inclure un indicatif de pays ?
Utilisez un indicatif de pays lorsque le public visé et les règles de numérotation l’exigent, en particulier si des personnes peuvent appeler depuis un autre pays. Les conventions d’appel local varient ; choisissez donc un format qui indique clairement la destination prévue.