I think I got it.
So with regular <a> tags looking like <a href="javascript:void(0)">Click me!</a>, at the end of each snippet (or after a snippet is rendered), run the following JavaScript…
let _links = document.querySelectorAll("a");
_links.forEach( _element => {
_element.setAttribute("tabindex", "0");
_element.removeAttribute("href");
});
Setting a tabindex allows focus to happen with keyboard tabbing. Also, by removing the href, an <a> tag link ceases to look like a link so you’ll need the following CSS…
a { color: #69c; text-decoration: underline; cursor: pointer; }
Now that the link works with clicking/tapping we need to make it work with the keyboard properly for accessibility reasons. Normally, pressing the spacebar or enter will activate an element’s default behaviour. (The enter key works to follow links normally.) However, there is no href anymore so we have to capture a spacebar or enter key press when the link has focus. It’s getting late for me, but this tutorial explains how to do just that.
Screen readers use ARIA attributes in order to know about and describe things properly. I don’t have a screen reader installed, but my understanding is that role="link" or role="button" can be added to elements to identify them properly in case the missing href interferes with a screen reader’s ability to identify the modified <a> tags.
The nice thing is that once the code is in place, you don’t have to touch it again. Make links until you puke and all should be right. I’ve only half tested this code on Win10 in Firefox and Chrome so I’ll run it through the paces maybe on the weekend. I’m curious about screen readers so I’ll look into that as well, but I feel pretty confident about this so far.
Edit: Kind of related, but too much of a hack job, I think… changing the href to "http:/ㅤ/../.." will eliminate the tool tip, but will try to navigate the page to nowhere. It does keep the href though. Welcome to the internet where standards evolve at the speed of molasses. 