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 href attribute with the tel: 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.

+44 (0)20 7946 0123

Credits

Cover Image: Photo by James Sutton on Unsplash