Share
Non ho intenzione di iniziare questo suggerimento rapido con il vecchio "in questi giorni le persone visualizzano i tuoi siti web su una moltitudine di dispositivi", ma è vero. Molti dispositivi mobili faranno un buon lavoro nel riconoscere i numeri di telefono nel tuo codice HTML, rendendoli cliccabili in modo da poter chiamare direttamente quel numero - ma non sempre.
Cosa succede se il cellulare di un utente non riconosce un numero di telefono come "chiamabile"? Forse, ad esempio, il modo in cui hai inserito il numero non è riconosciuto dalla piattaforma. Opportunità mancata!
(Controlla la lista di schemi di Mark Hammond che siamo riconosciuto per iOS e Android ...)
Questo è facile: avvolgi i tuoi numeri di telefono in ancore, ma invece di usare il http * utilizzare il protocollo (o qualsiasi altra cosa normalmente si attacchi in un ancoraggio) tel: o tel: //. In questo modo, anche se hai utilizzato un pattern non riconosciuto, il dispositivo saprà comunque cosa fare:
+44 (0) 111 - 222 333 44
I browser non di supporto (ad esempio il desktop) non sanno cosa fare con tel: protocollo ancora - a meno che l'utente non abbia un qualche tipo di estensione abilitata che permetta a Skype di riconoscere i numeri di telefono. Google Chrome ignorerà felicemente il clic, ma al momento altri principali browser iniziano a piangere. Altri dispositivi non telefonici (come l'iPad) riconosceranno il numero, chiedendo all'utente di aggiungere un contatto alla loro rubrica - questo sarebbe un approccio ragionevole anche per i browser desktop.
Come extra opzionale, rendiamo ancora più chiaro all'utente che sta guardando un collegamento telefonico designando ciascuno di essi. Per questo utilizzeremo un selettore del valore dell'attributo, con targeting solo per il :prima pseudo elemento di collegamenti che contengono la stringa tel: dentro loro href attributo:
a [href ^ = "tel:"]: before content: "\ 260E"; blocco di visualizzazione; margin-right: 0.5em;
La piccola caratura lì ^ denota che sta cercando tutti gli elementi i cui attributi href inizio con la stringa che specifichiamo. tel: e tel: // saranno quindi entrambi coperti qui. Abbiamo inserito un piccolo telefono unicode \ 260E;, quindi non abbiamo nemmeno bisogno di usare un'icona webfont. Bello.
Bella tonalità eh? 
Accentsconagua
colore: pomodoro credici o no… Abbiamo finito qui, in nome dell'accessibilità provatelo!
