Over the last few years you’ll have noticed that telephone numbers on websites increasingly display as a clickable link. This is very handy when viewing on mobile devices since it saves you copying and pasting (or writing down and manually typing in) the number – just one tap on the number and it opens up your dialler with the number already there for you. That’s great usability.
iOS, the operating system that runs iPhones and iPads, takes this one step further. Its default web browser, Safari, identifies numbers that look like phone numbers and implements this automatically, meaning that the web developer doesn’t have to add any extra code to make the number a hyperlink. But hang on a minute, not all numbers on a web page are phone numbers – think bank accounts, IP addresses, membership IDs and so on. Well-intentioned as this undoubtedly is, it’s not smart UX. Consider the automatic change of text colour when it becomes a link as we experienced this week, where your link colour text is the same colour as that element’s background and the number becomes invisible. That’s not great usability.
So, how to fix this? It’s not often we can say this, but it really is just one line of code. Forget CSS styling overrides or mixins, just add this meta tag into your site-wide header:
<meta name="format-detection" content="telephone=no">
You can still wrap genuine phone numbers in a “tel” link; this fix simply overrides Safari’s phone number prediction. If you have a themed WordPress site you don’t want to be hacking the core code, but luckily there are plugins available that allow you to safely manipulate your metadata.
We have to thank Apple for keeping us on our toes though. It’s issues that like this that initially puzzle you, force you to research and identify a fix, and of course learn, and that’s a major part of being a web developer.
