WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: styling phone links

for

From: Patrick H. Lauke
Date: Oct 11, 2017 1:59PM

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).

P
--
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