span role link

<!-- HTML -->
<h1>role="link" example</h1>

<span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link">
  Fake accessible link created using a span
</span>

<p><a href="https://mozilla.org" target="_blank">Actual real link</a></p>

<!-- CSS -->
span[role="link"] {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

span[role="link"]:focus {
  outline: 1px dotted black;
}

<!-- JavaScript -->
const spanElem = document.querySelector('span');

//handles clicks and keydowns on the link
function navigateLink(e) {
    if (e.type === 'click' || e.key === 'Enter') {
        let ref = e.target != null ? e.target : e.srcElement;
        if (ref) {
          window.open(ref.getAttribute('data-href'), '_blank');
        }
    }
}

spanElem.addEventListener('click', navigateLink);
spanElem.addEventListener('keydown', navigateLink);