Fixing "Read More" link to be accessible to screen readers

Just a reminder for myself, to make links accessible to screenreaders, use the following template or a variation of thereof:

    <a href="..."
      <span data-bind="text: regularLinkText">
      <span data-bind="text: accessibleLinkText" class="sr-only"> <!-- this will be the text for screen reader and not visible to naked eye -->
    </a> 

The problem I kept having was that I set the data-bind="text: linkTextHere" on the actual <a> tag, and that wiped out whatever other controls I nested inside.

Skip a link while tabbing over a web page or access a link via tab

One way of doing it is to remove the href element of the link.

In contrast, if a link cannot be reached to while tabbing over a page, adding an

    href="javascript:void(0);" 

would make the link reachable via tabbing. Moreover, if a 'click' event is attached to the link, the element will respond to the Enter key press despite the fact that the 'keyup' (or other key type event) is not attached.