Share
Je ne vais pas commencer cette astuce rapide avec le vieux message «De nos jours, les gens consultent vos sites Web sur une multitude d’appareils». est vrai. De nombreux appareils mobiles reconnaîtront les numéros de téléphone dans votre code HTML, ce qui les rend cliquables pour que vous puissiez appeler directement ce numéro - mais pas toujours..
Que se passe-t-il si le portable d'un utilisateur ne reconnaît pas un numéro de téléphone comme "appelable"? Par exemple, la manière dont vous avez entré le numéro n'est pas reconnue par la plate-forme. Occasion manquée!
(Consultez la liste des modèles de Mark Hammond qui sont reconnu pour iOS et Android…)
Celui-ci est facile: insérez vos numéros de téléphone dans des ancres, mais au lieu d'utiliser le http * protocole (ou quoi que vous fassiez normalement dans une ancre) utilisez tel: ou tel: //. Ainsi, même si vous avez utilisé un motif non reconnu, l'appareil saura toujours quoi faire:
+44 (0) 111 - 222 333 44
Les navigateurs non compatibles (votre bureau, par exemple) ne savent pas quoi faire avec le tel: pas encore de protocole - à moins que l’utilisateur ait une sorte d’extension activée permettant à Skype de reconnaître les numéros de téléphone. Google Chrome ignorera volontiers le clic, mais pour le moment, les autres principaux navigateurs commencent à pleurer. D'autres appareils non téléphoniques (tels que l'iPad) reconnaîtront le numéro, ce qui incitera l'utilisateur à ajouter un contact à son carnet d'adresses. Cette approche serait également judicieuse pour les navigateurs de bureau.
En option, expliquons encore plus à l'utilisateur qu'ils recherchent un lien téléphonique en désignant chacun d'eux. Nous allons utiliser un sélecteur de valeur d'attribut pour cela, ciblant uniquement le :avant pseudo élément de liens contenant la chaîne tel: dans leur href attribut:
a [href ^ = "tel:"]: avant contenu: "\ 260E"; bloc de visualisation; marge droite: 0.5em;
Le petit carat là ^ indique qu'il recherche tous les éléments dont les attributs href commencer avec la chaîne que nous spécifions. tel: et tel: // seront donc tous deux couverts ici. Nous avons inséré un petit téléphone unicode \ 260E;, nous n’avons même pas besoin d’utiliser une icône représentant une police Web. Agréable.
Belle teinte hein? 
Accentsconagua
couleur: tomate Croyez-le ou non… Nous avons tous terminé, au nom de l'accessibilité, essayez-le!
