Clickable phone numbers on web pages

[Bgolden67]

Hi All,
While i think everyone will agree that seeing a phone number that is clickable when using your cell phone is a great help (as long as it's coded correctly of course).

My question is:
Should we apply some CSS to "hide" that link while in desktop screen size and only have it clickable in mobile screens? Or just leave it alone?

example css could be (probably other options as well):

<style> @media(min-width:768px) { a[href^="tel:"] { pointer-events: none; text-decoration: none; color: black; } } </style>

[shawnthompson]

Thanks @Bgolden67 for starting this discussion. It's a great topic that I've been wanting to tackle for quite some time now.

As a person with a cognitive disability (memory) and a Mac user, I use my desktop to call on my iPhone. So if I'm browsing the web on my desktop and I want to call a number I find I love the option to click and it opens FaceTime to call using my iPhone.

The Safari browser has an algorithm in it that scans the content of a webpage and will make most phone numbers clickable
(does the same with date for calendar events) even if they aren't coded with the href="tel": attribute. But doesn't always work so we can't rely on it. Also what if I wanted to use another browser on my Mac that doesn't have that algorithm, I'm stuck losing spoons trying to remember the phone number.

Articles found on the subject

Phone number links and accessibility

If you read the comments to this article a lot of people disagree with the method.

Accessibility and phone number formatting

This article was writing in 2016 so it's out of date and a lot has changed since then. The author says "a screen reader will read “703.555.1212”, which isn't always true, some screen readers have algorithms to detect phone numbers and read it properly.

The Current State of Telephone Links

Another great article but again from 2016 so it's outdated. This article talks about some interesting solutions to think about though.

What if we talk to the design team to come up with a specific style for phone numbers and have WET apply it to all places that use tel: as an href. Like a new colour for the link text and to add an icon before or after the number to make it look different.

"I'm a developer captain not a designer"

• Dr. McCoy

Great conversation! Keep it going!

[Bgolden67]

Thanks @shawnthompson

I didn't know about the link between your desktop and your phone, makes sense now to keep the link visible.

the other question that seems to have varying answers is needing to include the + before the phone number...
i.e. tel:+18195551234
or
tel:18195551234

Both apparently work unless you expect foreign countries to call, then it's clear you need the +

perhaps it's a best practice to always include the +

[shawnthompson]

I don't think it's that much an important thing but definitely something we can add in our best practice document.

[Bgolden67]

consistency... it's a good habit

[duboisp]

For the format of the phone number, here some standard that explain it in details what it is supported.

• https://www.rfc-editor.org/rfc/rfc3966.html
• https://www.rfc-editor.org/rfc/rfc5341.html

Example:

<a href="tel:+1-201-555-0111">a test number</a>

[shawnthompson]

I wonder is we can create a WET plugin :)

[duboisp]

Yes it is possible to create a WET plugin, but it will do what exactly? Hide those :tel link in desktop view? For accessibility purpose, we shall provide the similar or equivalent functionality for every view port. Each view port are an alternative equivalent version of the content, like English and French.

The URI scheme "tel" is already supported by multiple device.