iPhones, iPads, and other mobile devices automatically detect phone numbers and add the tap-to-call functionality. It’s a great feature for user experience, but the systems add their own styling to the numbers, i.e. usually they are blue and underlined. This makes sense as a default, it’s the traditional link styling, and what Google still uses in it’s SERP pages.
However, a blue underline may not match the design of the rest of the page. Or worse, may be illegible on similarly coloured backgrounds.
Styling the phone number
We want the numbers to look like a link so mobile users are more inclined to tap it and make that call. So it’s a good idea to keep the underline, or maybe make it even more obvious as a call-to-action button.
Add an anchor tag
The best way to do this is to wrap the number in an anchor tag with the href as tel:thenumber. A bit like a mailto email link, like this:
<a class="tel" tabIndex="-1" href="tel:01872 272894">01872 272894</a>
Note the tabIndex, more on this later in the article. Adding a class gives us a hook, if needed, to add CSS:
.tel,.tel:visited { /*for small screens */
display:block;
color:#fff;
background-color:#000;
padding:1em;
text-decoration:none;
}
.tel:hover,.tel:focus {
color:#000;
background-color:#fff;
}
@media screen and (min-width: 28.5em) { /* for larger screens */
.tel,.tel:visited {
background:none;
cursor:default;
}
.tel,.tel:focus {
color:#000;
}
}
The above will make a simple looking button on small screens, and just text on larger screens. The curser state is defined as default, which is the regular arrow. This is so not to confuse desktopers when they rollover a link that goes no-where.
An unwanted link
The anchor tag is a great solution for small screens, but the tradeoff is that it’s unnecessary and potentially an accessibility issue for larger screens. Although we’ve styled it so it doesn’t look or behave like a link, it’s there in the DOM. Which means it will mess with the tab index a little, i.e. it will take the focus when keyboard users are tabbing through links on the site. Luckily, there’s a solution.
TabIndex-1
This has good browser support, and is a simple way to stop a link receiving the focus. Adding it to the anchor tag for the phone number means keyboard users will be none-the-wiser, and their experience is not effected. Here it is again:
<a tabIndex="-1" href="tel:01872 272894">01872 272894</a>
Embrace the Phone number link on mobiles
It is possible to stop devices recognising numbers altogether with this piece of metadata:
<meta name="format-detection" content="telephone=no">
However, I don’t recommend using it. Most businesses want to be contacted by their customers, using the code above makes it hard for customers to call from their phone. They would have to leave the browser to make the call, remembering the number, or having to write it down. Copy and paste isn’t an option either as pasting into the dial screen doesn’t work on all devices.
Although the iPhone’s does a good job of recognising phone numbers, adding the <a> with href of the number eliminates any possibility of the device not recognising it. After-all the device is looking for patterns in the numbers, i.e. a certain amount of numbers followed by a space, followed by some more numbers. If the phone number, or the way it’s entered on the site, doesn’t match a pattern it could be missed.
Manually telling iPhones, iPads and other devices to engage phone number recognition, and styling it on page, add up to a mini win for user experience and removing barriers between websites and their customers.
Comments
Jake
Worked great for me, but isn't this technically a broken link and potentially damage seo?
Geoff Muskett
Good question Jake, I'd suggest putting a re="nofollow" attribute in the link. Google should ignore it, hopefully...
Johnny
This works visually, but if I'm on a real computer I can click the tel and get a dead link. Any way around this?
Geoff Muskett
You could use Modernizr to check for touch, and if there's not then remove the href attr
Oliver
Thanks for the information, Geoff. This is great. I had hired a graphic designer to fix some glitches on my website and this is something he couldn't figure out. Anyway, I tried to implement your solution. It worked well on iPhone view, but messed up in normal page view (on the desktop). Please email me if this is something you can do for me and how much you charge. Thank you.
Jon
could you not just put .tel{pointer-events: none;} on the media query so there is not interaction on a large screen.
great tutorial :)
Geoff Muskett
Hey Jon, yeah, good idea!
Gabriele
Interesting article. I'd use "cursor: text" instead of "default" for computers screens, so the phone number can be copy-pasted as with normal text.
Pauline
Thanks for this!
baby hazel
hm. styling phone number :)