Um número clicável escreve-se <a href="tel:+33612345678">06 12 34 56 78</a>: indicativo internacional, nenhum espaço no href, número legível no texto. Ao contrário, para impedir que um navegador transforme sozinho os teus números em links, acrescenta <meta name="format-detection" content="telephone=no"> no head e cria os teus links tel: à mão.
Um número de telefone numa página web levanta duas questões opostas. A primeira: como torná-lo clicável, para que um visitante no telemóvel faça a chamada com um gesto? A segunda: como impedir que certos navegadores o transformem eles próprios num link, com um estilo que não controlas? A resposta à primeira é o link tel:; a resposta à segunda é a tag meta format-detection, o assunto de origem deste artigo. Aqui ficam as duas, pela ordem em que fazem falta.
Criar um link de telefone clicável
O esquema de URL tel:, definido pela RFC 3966, indica ao navegador que um clique deve marcar um número. Num smartphone, abre-se a aplicação Telefone com o número já preenchido; num computador, o sistema propõe uma aplicação de telefonia se tiver alguma (FaceTime, Teams, Skype), caso contrário não acontece nada.
<a href="tel:+33612345678">06 12 34 56 78</a>Três regras para um link que funcione em todo o lado:
- Formato internacional no
href:+33seguido do número sem o 0 inicial. Um número nacional não é marcado corretamente a partir do estrangeiro nem a partir de certas aplicações. - Nenhum espaço nem ponto no
href. A RFC permite os hífenes e os pontos como separadores visuais, mas nem todos os aparelhos os toleram: o mais seguro é uma sequência de algarismos. A formatação legível (06 12 34 56 78) fica no texto do link. - O número visível no texto. Um ícone sozinho não serve a quem lê a página num computador sem telefonia, nem a um leitor de ecrã.
Para um número com extensão, a RFC prevê o parâmetro ext: tel:+33123456789;ext=204. O suporte por parte das aplicações é irregular; indica a extensão também no texto.
Boas práticas de apresentação
<p>
Service client :
<a href="tel:+33123456789" class="tel">01 23 45 67 89</a>
(du lundi au vendredi, 9 h à 18 h)
</p>/* Em ecrãs grandes, onde a chamada direta é improvável, pode neutralizar-se o aspeto do link */
@media (min-width: 64rem) {
a.tel {
color: inherit;
text-decoration: none;
pointer-events: none;
}
}A regra CSS é uma opção editorial, não uma obrigação: um computador equipado com uma aplicação de telefonia pode perfeitamente ligar. Muitos sites mantêm o link ativo em todo o lado.
Link SMS e link WhatsApp
O mesmo princípio aplica-se às mensagens. O esquema sms: abre a aplicação de mensagens; o parâmetro body preenche o texto de antemão (codifica os espaços e os caracteres especiais).
<a href="sms:+33612345678">Envoyer un SMS</a>
<a href="sms:+33612345678?body=Bonjour%2C%20je%20souhaite%20un%20devis">SMS avec message</a>O WhatsApp fornece um link universal, wa.me, seguido do número internacional sem + nem zeros:
<a href="https://wa.me/33612345678?text=Bonjour" rel="noopener" target="_blank">Écrire sur WhatsApp</a>No telemóvel, abre a aplicação; no computador, o WhatsApp Web. A abertura dos links sms: e wa.me depende das aplicações instaladas: mostra sempre o número em claro ao lado.
Impedir a deteção automática dos números
É o problema inverso, e o assunto de origem deste artigo. Alguns ambientes reparam nas sequências de algarismos parecidas com um número de telefone e transformam-nas por sua conta em links tel:, sublinhados, coloridos, sem que o teu HTML o tenha pedido. Uma referência de produto, um código postal seguido de um número de porta ou um identificador podem assim tornar-se «números» clicáveis e estragar o teu layout.
Quem deteta o quê, hoje:
- O Safari no iPhone e no iPad: deteção ativa por omissão em todas as páginas.
- As WebViews das aplicações móveis (e alguns navegadores Android): comportamento variável, muitas vezes ativo.
- Os clientes de e-mail: o Apple Mail e a aplicação Mail do iOS detetam números, datas e moradas nos e-mails em HTML.
- O antigo Microsoft Edge (motor EdgeHTML, 2015-2020), associado ao Skype, transformava os números no Windows 10: era o caso descrito na primeira versão deste artigo. O Edge atual, baseado no Chromium, já não o faz no computador, tal como o Chrome ou o Firefox.
A tag que desativa este comportamento coloca-se no head:
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
…
</head>A partir daí, o navegador deixa de criar sozinho qualquer link de telefone na página e só os teus links tel: explícitos continuam clicáveis. É a combinação recomendada: a deteção automática desativada e cada número que queres tornar clicável marcado à mão, com o formato internacional certo. Ficas com o controlo do estilo e evitas os falsos positivos.
Aparece também content="telephone=no, date=no, address=no, email=no", sobretudo nos modelos de e-mail em HTML, para impedir que o Apple Mail sublinhe datas e moradas. Só o valor telephone=no está documentado pela Apple; os outros são tolerados pelo Safari e pelo Mail, sem garantia. Não incomodam os navegadores que não os conhecem.
Num e-mail HTML
O caso mais frequente hoje já não é a página web, mas o e-mail: uma referência de encomenda ou um montante torna-se um link azul no Apple Mail. A mesma tag, no head da mensagem, resolve o problema. Para os clientes que a ignoram, um truque muito usado consiste em envolver o número num link da mesma cor do texto, o que fixa o estilo em vez de o deixar ao critério do cliente.
<a href="#" style="color: #333333; text-decoration: none;">Commande n° 2026 0907 4512</a>Acessibilidade e dados estruturados
Dois complementos que custam uma linha cada um:
- Um
aria-labelpode tornar o número mais claro para os leitores de ecrã, que às vezes leem «zero seis doze…» de forma pouco natural:<a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>. - Para um site de empresa, a propriedade
telephoneda marcação Schema.org (OrganizationouLocalBusiness) dá o número aos motores de busca em formato internacional, independentemente da forma como é apresentado:"telephone": "+33123456789".
Resumo
| Objetivo | Código |
|---|---|
| Número clicável | <a href="tel:+33612345678">06 12 34 56 78</a> |
| SMS já preenchido | <a href="sms:+33612345678?body=Bonjour">…</a> |
<a href="https://wa.me/33612345678">…</a> | |
| Bloquear a deteção automática | <meta name="format-detection" content="telephone=no"> no head |
O link de telefone é um caso particular da tag a; os outros atributos e esquemas de URL estão detalhados em 20 tags HTML5 a conhecer.
Erros frequentes
href="tel:06 12 34 56 78" funciona em alguns aparelhos e noutros não. O href só leva algarismos, o + e eventualmente hífenes; a formatação fica no texto do link.tel:0612345678 não marca nada de correto a partir do estrangeiro. Escreve sempre +33 e tira o 0 inicial.
