E-mail List Archives

Re: styling phone links


From: Swift, Daniel P.
Date: Oct 11, 2017 2:06PM

", use JS-based media queries and turn those links into actual non-links (like generic <span>s or something)"

I second this. We had to go down that hole too ... spans initially for the phone numbers and then we convert them to links using JS (based on media query). Personally, I think that's a more appropriate approach than changing the styling.

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Patrick H. Lauke
Sent: Wednesday, October 11, 2017 3:59 PM
Subject: Re: [WebAIM] styling phone links

On 11/10/2017 20:52, Angela French wrote:
> Hello,
> On our website our links are blue with a border-bottom that change to orange when they receive focus. However on phone numbers (we use the tel attribute), we use media queries to remove the link styling on devices we can generally assume (by their size) are not capable of making phone calls.

Note that checking one thing and inferring another unrelated one from that is not always the best way. For instance, if a user has Skype with the relevant browser extension installed, they can indeed make calls even from a large screen "desktop" device.

Similarly, they may be on a large screen "desktop" device, but have their browser window made smaller than full screen, or they may be using browser zoom. In these situations, the viewport size will register as "small screen".

Lastly, you may remove the styling/underline, but for keyboard users those links will still be in the tab/focus cycle.

In general I'd say it would be best to avoid this strategy altogether.
But if you insist, use JS-based media queries and turn those links into actual non-links (like generic <span>s or something).

Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke