<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>&lt;span&gt;</code> for the phone number and then replace it with an <code>&lt;a&gt;</code> at a specific screen size:</p>

<div id="myTel">
  <span id="num">555-555-5555</span>

<p>Both numbers start as a <code>&lt;span&gt;</code>, but the second number has been changed to an <code>&lt;a&gt;</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>

*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

body {
  font-family: -apple-system, 
    "Segoe UI", 
    "Helvetica Neue", 
  font-size: 1.45em;
  line-height: 1.75;
  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;

/* general styling */
pre {
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  padding: 3px;

code {
  white-space: nowrap;

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>");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js