Share
No voy a comenzar este rápido consejo con el viejo "hoy en día la gente ve sus sitios web en una multitud de dispositivos", pero es cierto. Muchos dispositivos móviles harán un buen trabajo al reconocer los números de teléfono en su HTML, haciéndolos clic para que pueda llamar directamente a ese número, pero no siempre.
¿Qué sucede si el móvil de un usuario no reconoce un número de teléfono como "llamable"? Quizás, por ejemplo, la forma en que ingresó el número no sea reconocida por la plataforma. Oportunidad perdida!
(Echa un vistazo a la lista de patrones de Mark Hammond que son reconocido para iOS y Android…)
Este es muy fácil: envuelva sus números de teléfono en anclas, pero en lugar de usar el http * protocolo (o cualquier otra cosa que normalmente se pegaría en un ancla) uso tel: o tel: //. De esta manera, incluso si ha usado un patrón no reconocido, el dispositivo sabrá qué hacer:
+44 (0) 111 - 222 333 44
Los navegadores no compatibles (su escritorio, por ejemplo) no saben qué hacer con el tel: protocolo aún, a menos que el usuario tenga algún tipo de extensión habilitada que permita a Skype reconocer números de teléfono. Google Chrome ignorará felizmente el clic, pero en este momento otros navegadores importantes comienzan a llorar. Otros dispositivos que no sean teléfonos (como el iPad) reconocerán el número, lo que le pedirá al usuario que agregue un contacto a su libreta de direcciones; esto también sería un enfoque sensato para los navegadores de escritorio.
Como un extra opcional, aclaremos aún más al usuario que están viendo el enlace de un teléfono al estilo de cada uno. Usaremos un selector de valor de atributo para esto, apuntando solo al :antes de pseudo elemento de enlaces que contienen la cadena tel: dentro de su href atributo:
a [href ^ = "tel:"]: antes de contenido: "\ 260E"; bloqueo de pantalla; margen derecho: 0.5em;
El pequeño quilate allí. ^ Denota que está buscando cualquier elemento cuyos atributos href. empezar con la cadena que especificamos. tel: y tel: // Por lo tanto, ambos serán cubiertos aquí. Hemos colocado un pequeño teléfono Unicode. \ 260E;, por lo que ni siquiera necesitamos usar un icono webfont. Bonito.
Buen tono eh? 
Accentsconagua
color: tomate por extraño que parezca… Todos hemos terminado aquí, en nombre de la accesibilidad, pruébalo.!
