<h1>Phone link accessibility dilemma</h1>
<p><a href="https://www.w3.org/TR/WCAG20-TECHS/F73.html">WCAG 2.0 guidelines</a> state that links should be underlined. But, in the case of a phone number, it doesn't make a lot of sense to show it as a link on a non-mobile screen. And, screen readers will read it as a link.</p>
<p>An alternative would to use a <code><span></code> for the phone number and then replace it with an <code><a></code> at a specific screen size:</p>
<div>
<span>555-555-5555</span>
</div>
<div id="myTel">
<span id="num">555-555-5555</span>
</div>
<p>Both numbers start as a <code><span></code>, but the second number has been changed to an <code><a></code> in the DOM because its container is a specific size. Now screen readers will only read the number as a link when appropriate.</p>
body {
font: 1.4em/1.75 sans-serif;
margin: 1em;
}
h1 {
font-size: 1.5em;
margin-bottom: .5em;
}
p {
margin-bottom: 1.5em
}
a {
color: #006fc6;
font-weight: 600;
text-decoration: underline solid #8cc8ff;
}
a:hover {
text-decoration: underline solid #006fc6;
}
div {
display: inline-block;
margin-bottom: 1.5em;
margin-right: 1.5em;
}
#num {
max-width: 699px;
}
(function () {
if ($("#myTel").width() <= 700) {
$("#num").replaceWith(function () {
return $("<a href='tel:" + $(this).html() + "'>" + $(this).html() + "</a>");
});
}
}());
Also see: Tab Triggers