Random programming things I'd want to remember

Wednesday, May 2, 2018

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.