Posted on Monday, January 10th (4847 days ago)

I was adding a graphic to a webpage I’m marking up and the graphic contains the company’s Toll Free phone number.

I thought it would be convenient if the graphic could be clicked to call the Toll Free number if someone is using a phone.

Fortunately this is really easy to do. Just wrap your phone number in a link like this:

<a class="tel" href="tel:8001234567">(800) 123-4567</a>

The class attribute “tel” is totally optional and has nothing to do with the link being clickable. The only weird thing I see is that in a desktop environment, the link appears to be clickable, but doesn’t to anything. Seems pointless and confusing rather than convenient in this instance.

How can this be resolved? A splash of CSS.

a.tel { cursor: default; /* no hand pointer */ }

Have an alternative solution or see something wrong? Let me know.

---

About Joseph R. B. Taylor

Joseph R. B. Taylor is a humble designer/developer who makes stuff for screens of all shapes and sizes. He is currently the lead UI/UX Architect at MScience, LLC, where he works to create simple experiences on top of large rich datasets for their customers and clients.