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