Link telefono in HTML: link tel: cliccabile e format-detection

Un numero di telefono su una pagina web pone due domande opposte. La prima: come renderlo cliccabile, perché un visitatore da mobile avvii la chiamata con un gesto? La seconda: come impedire a certi browser di trasformarlo da soli in un link, con uno stile che non controlli? La risposta alla prima è il link tel:; la risposta alla seconda è il tag meta format-detection, argomento originario di questo articolo. Eccoli entrambi, nell’ordine in cui servono.

Creare un link telefono cliccabile

Lo schema di URL tel:, definito dalla RFC 3966, indica al browser che un clic deve comporre un numero. Su uno smartphone si apre l’applicazione Telefono con il numero già inserito; su un computer il sistema propone un’applicazione di telefonia se ne ha una (FaceTime, Teams, Skype), altrimenti non succede nulla.

<a href="tel:+33612345678">06 12 34 56 78</a>

Tre regole per un link che funziona ovunque:

• Formato internazionale nell’href: +33 seguito dal numero senza lo 0 iniziale. Un numero nazionale non si compone correttamente dall’estero né da certe applicazioni.
• Nessuno spazio né punto nell’href. La RFC ammette trattini e punti come separatori visivi, ma non tutti i dispositivi li tollerano: la cosa più sicura è una sequenza di cifre. La formattazione leggibile (06 12 34 56 78) va nel testo del link.
• Il numero in chiaro nel testo. Un’icona da sola non serve né a chi legge la pagina su un computer senza telefonia, né a uno screen reader.

Per un numero con interno, la RFC prevede il parametro ext: tel:+33123456789;ext=204. Il supporto da parte delle applicazioni è disomogeneo; indica l’interno anche nel testo.

Buone pratiche di visualizzazione

<p>
  Service client :
  <a href="tel:+33123456789" class="tel">01 23 45 67 89</a>
  (du lundi au vendredi, 9 h à 18 h)
</p>

/* Su schermi grandi, dove la chiamata diretta è improbabile, si può neutralizzare l'aspetto del link */
@media (min-width: 64rem) {
  a.tel {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }
}

La regola CSS è una scelta editoriale, non un obbligo: un computer con un’applicazione di telefonia può benissimo chiamare. Molti siti tengono il link attivo ovunque.

Link SMS e link WhatsApp

Lo stesso principio vale per i messaggi. Lo schema sms: apre l’applicazione di messaggistica; il parametro body precompila il testo (codifica gli spazi e i caratteri speciali).

<a href="sms:+33612345678">Envoyer un SMS</a>
<a href="sms:+33612345678?body=Bonjour%2C%20je%20souhaite%20un%20devis">SMS avec message</a>

WhatsApp fornisce un link universale, wa.me, seguito dal numero internazionale senza + e senza zeri:

<a href="https://wa.me/33612345678?text=Bonjour" rel="noopener" target="_blank">Écrire sur WhatsApp</a>

Su mobile apre l’applicazione; su computer, WhatsApp Web. L’apertura dei link sms: e wa.me dipende dalle applicazioni installate: metti sempre il numero in chiaro accanto.

Impedire il rilevamento automatico dei numeri

È il problema inverso, ed è l’argomento originario di questo articolo. Certi ambienti individuano le sequenze di cifre che somigliano a un numero di telefono e le trasformano da sole in link tel:, sottolineati, colorati, senza che il tuo HTML l’abbia chiesto. Un codice prodotto, un CAP seguito da un numero civico, un identificativo possono così diventare «numeri» cliccabili e rovinare l’impaginazione.

Chi rileva che cosa, oggi:

• Safari su iPhone e iPad: rilevamento attivo per impostazione predefinita su tutte le pagine.
• Le WebView delle applicazioni mobili (e certi browser Android): comportamento variabile, spesso attivo.
• I client di posta: Apple Mail e l’app Mail di iOS rilevano numeri, date e indirizzi nelle e-mail HTML.
• Il vecchio Microsoft Edge (motore EdgeHTML, 2015-2020), abbinato a Skype, trasformava i numeri su Windows 10: era il caso descritto nella prima versione di questo articolo. L’Edge attuale, basato su Chromium, non lo fa più sul desktop, e nemmeno Chrome o Firefox.

Il tag che disattiva questo comportamento si mette nel head:

<head>
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no">
  …
</head>

Da quel momento il browser non crea più nessun link telefono di sua iniziativa nella pagina, e restano cliccabili solo i tuoi link tel: espliciti. È la combinazione consigliata: rilevamento automatico disattivato e ogni numero che vuoi rendere cliccabile marcato a mano, con il formato internazionale giusto. Mantieni il controllo dello stile ed eviti i falsi positivi.

In un’e-mail HTML

Il caso più frequente oggi non è più la pagina web ma l’e-mail: un numero d’ordine o un importo diventa un link blu in Apple Mail. Lo stesso tag, nel head del messaggio, risolve il problema. Per i client che lo ignorano, un trucco diffuso consiste nell’avvolgere il numero in un link dello stesso colore del testo, il che fissa lo stile invece di lasciarlo al client.

<a href="#" style="color: #333333; text-decoration: none;">Commande n° 2026 0907 4512</a>

Accessibilità e dati strutturati

Due complementi che costano una riga ciascuno:

• Un aria-label può rendere il numero più chiaro agli screen reader, che a volte leggono «zéro six douze …» in modo poco naturale: <a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>.
• Per un sito aziendale, la proprietà telephone del markup Schema.org (Organization o LocalBusiness) fornisce il numero ai motori di ricerca in formato internazionale, a prescindere da come è mostrato: "telephone": "+33123456789".

Riepilogo

Il link telefono è un caso particolare del tag a; gli altri attributi e schemi di URL sono dettagliati in 20 tag HTML5 da conoscere.