Les liaisons téléphoniques sont une chose. Comme un lien d’ancrage sur lequel vous appuyez pour (probablement) accéder à une autre page, ce sont des liens sur lesquels vous appuyez pour appeler un numéro sur un appareil compatible avec un téléphone. Ils ont été autour depuis un certain temps. Pourtant, ils me causent beaucoup de confusion. Par exemple, de nombreux appareils reconnaîtront automatiquement les numéros de téléphone et feront la liaison pour nous, mais pas toujours.

Il y a suffisamment de trafic Web sur les appareils mobiles et beaucoup d’applications de bureau capables de passer des appels, qu’il vaut la peine d’en savoir plus sur les liens téléphoniques.,

Utilisation par Défaut

Nous avons un extrait de téléphone de liens sur ce site qui traîne depuis 2011:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Cela fonctionne aussi sur les liens de texte:

<a href="tel:1-562-867-5309">Click to Call!</a>

tel: n’est pas tellement une fonctionnalité que c’est un protocole, de la même manière que http: et mailto: sont des protocoles pour le <a> fonctionnalité tag. La spécification elle-même n’a rien à dire à ce sujet, bien que HMTL5 ait fourni un support pour les gestionnaires de protocole personnalisés, qui permettent d’utiliser un tel protocole.,

Vous vous demandez probablement pourquoitel: peut être considéré comme une utilisation par défaut en l’absence de spécification officielle. Vous pouvez attribuer cela au fait qu’il s’agissait d’une norme proposée dès 2000 et adoptée plus tard par iOS, ce qui en fait la voie à suivre d’environ 2007. Il existe d’autres protocoles basés sur le téléphone (que nous verrons plus tard), mais nous nous concentrerons sur tel: compte tenu de son importance relative.,

Support du navigateur

Nous voyonstel: apparaître en tant que gestionnaire de protocole pour les liens sans documentation officielle; et lorsqu’il n’y a pas de documentation, nous voyons souvent des différences dans le support et le comportement du navigateur. Cela ne veut pas dire que les navigateurs ne reconnaissent pas la balise <a> elle-même. Au lieu de cela, les navigateurs peuvent prendre des décisions différentes sur ce qu’il faut faire lorsque ce lien est cliqué. Par exemple, un navigateur peut supposer qu’une autre application doit s’ouvrir et déclenchera une boîte de dialogue demandant quelle application utiliser. Dans d’autres cas, le lien peut être complètement ignoré.,

Navigateur T-il un lien?,td>Oui Lance l’appel de téléphone
iOS Oui Déclencheurs les options d’appel, un message, copier ou ajouter le numéro à l’application Contacts
Opéra (OSX) Oui Déclenche la boîte de dialogue de confirmation de l’utilisation d’une autre application
Opéra (Windows) Oui Déclenche un message d’erreur qui ne reconnaît pas le protocole
Safari Oui Lance FaceTime

Style de Téléphone des Liens

Style de numéros de téléphone est comme n’importe quel autre lien., En fait, il héritera du style par défaut pour les ancres:

a { color: orange; text-decoration: none;}

Disons que nous n’appliquons que les styles aux liaisons téléphoniques., Nous pouvons le faire avec un pseudo-sélecteur qui recherche le textetel: dans une URL donnée: 

a { color: orange; text-decoration: none;}

Tuts+ a une belle astuce en utilisant le pseudo-sélecteur::before pour ajouter le caractère unicode du téléphone avant que le numéro ne soit affiché: 

a:before { content: "\260e"; margin-right: 0.5em;}

Liens téléphoniques alternatifs

Croyez ou non,tel: n’est pas le seul moyen d’initier un appel téléphonique avec un lien. Voici quelques autres gestionnaires de protocole personnalisés basés sur un téléphone à notre disposition.,

  • callto: Exactement comme tel: mais utilisé pour effectuer des appels via l’application Skype.
  • détection automatique: De nombreux navigateurs détectent automatiquement un numéro de téléphone dans le code HTML et le lient pour vous—pas besoin de modifier le balisage. iOS, par exemple, le fera totalement, bien que cela ne semble pas être le cas pour Chrome sur Android.
  • sms: Ignorez l’appel et passez directement au message texte. Cela semble être beaucoup moins pris en charge que tel: est parmi les navigateurs, y compris mobile.,
  • fax: Retournez dans le futur avec les télécopieurs. Encore une fois, fiabilité inégale.

Meilleures pratiques

C’est un peu drôle de parler de meilleures pratiques quand il s’agit de quelque chose sans spécifications. La spécification donne un bref avis sur l’idée de” cliquer pour appeler », mais voici quelques choses à garder à l’esprit lorsque vous travaillez avec des numéros de téléphone et des liens.

Considérer le contexte

Une liaison téléphonique peut faire un excellent appel à l’action, en particulier sur les téléphones mobiles où il réduit la friction entre le contenu et l’appel., Dans le même temps, les liaisons téléphoniques pourraient être considérées comme un obstacle sur une expérience de bureau où un appel téléphonique ne serait pas possible si l’appareil n’a pas d’application qui le prend en charge.

Une idée serait de créer une classe spécifiquement pour les liens téléphoniques et de tenter de les afficher ou de les masquer en fonction de ce que nous savons sur le navigateur. Les requêtes Modernizr et media sont pratiques ici, bien que totalement imprécises.

Utiliser les codes de pays

Un code de pays n’est pas requis mais pourrait être une bonne idée pour les sites à trafic international., Les codes de pays peuvent être précédés d’un + mais cela n’est pas non plus requis.

<a href="tel:+01-562-867-5309">1-562-867-5309</a>

Optimisation des moteurs de recherche

Les experts en référencement pourraient avoir plus à ajouter que moi, mais Google offre un format de données structuré pour les entreprises locales et son utilisation rendra les liens téléphoniques plus reconnaissables aux robots d’exploration, les formatant sur les pages de résultats de recherche, Dudley Storey fournit un excellent aperçu avec l’exemple suivant:

Sur le revers de vouloir que les moteurs de recherche suivent les liens téléphoniques, vous pouvez ajouter rel="nofollow" à décourager les liens d’être suivis et indexés. Cela pourrait être une bonne idée pour tout lien n’étant pas désigné comme un appel à l’action car les robots d’exploration Web seraient enclins à essayer de le suivre nulle part.,

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

Désactiver la détection des numéros dans iOS

Si vous prévoyez d’ajouter des liens téléphoniques à votre balisage, vous pouvez également envisager de désactiver iOS de la détection automatique des numéros de téléphone et de remplacer vos styles. Ajoutez ce qui suit dans le document <head> pour désactiver cette fonction:

<meta name="format-detection" content="telephone=no">

Lecture