E-mail List Archives
Thread: styling phone links
Number of posts in this thread: 7 (In chronological order)
From: Angela French
Date: Wed, Oct 11 2017 1:52PM
Subject: styling phone links
No previous message | Next message →
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.
This style is dinging us on Siteimprove because there is the link is not distinguishable. Of course an automated device does not consider the media queries.
I tried a white border-bottom to try to fool the evaluator, but that didn't work. (our background color is white).
Any ideas on the best way to style phone links so as not to flag this error? We made this media query because in the beginning I was getting calls from people saying they were getting a weird message when they clicked on these links (from their computer). In IE, it opens a dialog that asks what application you want to use to open the link.
thanks
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Patrick H. Lauke
Date: Wed, Oct 11 2017 1:59PM
Subject: Re: styling phone links
← Previous message | Next message →
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
From: Swift, Daniel P.
Date: Wed, Oct 11 2017 2:06PM
Subject: Re: styling phone links
← Previous message | Next message →
", 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
610.738.0589
From: Patrick H. Lauke
Date: Wed, Oct 11 2017 6:32PM
Subject: Re: styling phone links
← Previous message | Next message →
Related to this, also worth noting: on an iPad (without any SIM)
clicking on a tel: link will open a context menu to send a message, add
to contacts, copy. Android tablets also trigger an add to contacts
dialog. And these devices will have a larger nominal viewport than a
"phone" device.
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
From: TRAUTWEIN_PAUL
Date: Thu, Oct 12 2017 9:46AM
Subject: Re: styling phone links
← Previous message | Next message →
Hi Angela,
It's been a while since I used Site Improve, but when I did, I was able to use its filtering features to ignore certain types of content. Sometimes it was specific words, or terms, that it would flag as incorrect spelling. However, I remember using its tools to find specific lines of html so we could make changes. So maybe it's not about fooling it, but telling it what to skip. Can you tell it to ignore any link with the 'tel- attribute during its crawl of your website?
Hope that helps.
Paul
On 10/11/17, 12:52 PM, "Angela French" < = EMAIL ADDRESS REMOVED = > 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.
This style is dinging us on Siteimprove because there is the link is not distinguishable. Of course an automated device does not consider the media queries.
I tried a white border-bottom to try to fool the evaluator, but that didn't work. (our background color is white).
Any ideas on the best way to style phone links so as not to flag this error? We made this media query because in the beginning I was getting calls from people saying they were getting a weird message when they clicked on these links (from their computer). In IE, it opens a dialog that asks what application you want to use to open the link.
thanks
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Jeremy Echols
Date: Thu, Oct 12 2017 9:57AM
Subject: Re: styling phone links
← Previous message | Next message →
I feel like it's important to consider the already-obsolete nature of what is being done here. As Patrick has pointed out, there are cases on desktops when users will be confused (tabbing through links, something blind users may do, and something sighted users with motor control issues may do). And (also pointed out by Patrick), there are cases where it's useful to have "tel" links even when it's not a phone.
The main purpose of media queries is to make sure you get content to users in a way that works for a given device. Using these as a way to assume capabilities which aren't part of the @media type/feature sets will cause problems you may not consider (keyboard-only users being confused in this case) and will undoubtedly require fixes down the road as screen sizes change, and the distinction between tablet / desktop / phone continues to blur.
From: Angela French
Date: Fri, Oct 13 2017 9:16AM
Subject: Re: styling phone links
← Previous message | No next message
Thanks everyone. I've been convinced to underline phone links regardless of device size.
Angela French