Make your website even more accessible when dealing with telephone numbers by allowing the user to click your number to make a call.
TL;DR
- Wrap the telephone number in an anchor tag
<a></a> - Prefix the telephone number in the
hrefattribute with thetel:schema - Make sure the telephone number uses the international dialling format
Note: This takes seconds to implement, so there's no excuse not to do it!
Problem
You want to talk with a real human to discuss a problem and you visit the website's "Contact Us" page to get the telephone number, you now have to copy the number from the website into your phone and then press the dial button.
Arrrrgggh, it shouldn't be this hard!
Those websites not in the know have the telephone number contained in the following HTML markup.
<span>+44 (0)20 7946 0123</span>
Note: The number above is a fictitious, so it'll fail to connect. Fictitious numbers are used in movies, television programs, etc. You can find out more about fictitious numbers on Wikipedia.
Solution (tel: Schema)
What is the tel: schema, its a URI schema for telephone numbers. Browsers are able to parse these values and understand that they should be treated as a telephone number.
HTML has built-in support for Click to Call, by wrapping the telephone number in an anchor link and using the tel: schema. E.g.
<a href="tel:+44-207-946-0123" title="Click to Call">+44 (0)20 7946 0123</a>
Note: Be a good citizen and use the international telephone dialling format to make sure the call is always connected, irrespective of where the caller is located.
There's no excuse not to implement this 5 seconds fix, we owe it to our users.✅
What Happens
Depending on whether you visit the website with a mobile device or desktop changes the behaviour of the link.
Mobile Devices
Pressing the telephone number will now open the device's default dialler app with the telephone number already inserted, user only has to press the dial button.
Desktop
This will depend on the browser used to navigate the website, but most modern browsers will prompt the user to make a call using their phone or pick an application.
Try It Out
Below is an example of how the telephone number will appear when visiting the website. Again this is a fictitious number so the call won't be connected, but should allow you to view the UX.
Credits
Cover Image: Photo by James Sutton on Unsplash
Top comments (8)
is there some sort of fallback to prevent
The address wasn't understooderrors on non mobile devices ?
Doesn't look like it has a native fallback. What browser/OS/device are you using to get the errors when using a non mobile device?
just ff on xubuntu
it's just a bit scary to get a big error screen although i have just noticed the addr bar does contain tel:+44-207-946-0123
Will stash this in my toolbox
Other similar stuff include:
"mail:" for email addresses, query parameters can be used to add subject, body, etc
"fax:" for Fax Numbers
"callto:" for Skype
Thanks for sharing a great tip to make the web just a bit better! I will definitely use this next time I add a phone number to a site.
Why is the example UK phone number formatted like a North American one? It should be, at the very least, +44 (20) 7946-0123. +44 (0)20 7946 0123 would be better.
Yep, quite right, good spot. I'll change it now.