title: Accessibility: Using javascript only links with href="#"
body: <p>I have a react SPA in which I have some links which navigate to other pages or other locations on the same page, These navigations are either decided programmatically or are dependent on javascript to go to another location on the same page.</p>
  <ul>
  <li>I might not know the link <code>href</code> when the link is displayed, so I render it with <code>href=&quot;#&quot;</code> and <code>event.preventDefault()</code> in the click handler, after which I run the logic to decide where the link should navigate to.</li>
  <li>In case of anchor links, I need javascript to scroll to the element, because with SPA routers hash based anchor links might not work as the anchored element might not be available yet, and also i need smooth scroll. (In this case, I can probably still specify the href, which keeps the link accessible, but use javascript to handle the scrolling)</li>
  </ul>
  <p>To me, semantically it still should be a link and not a button as it navigates the user to another page or another location on the same page. But, thinking about accessibility, the screen reader doesn't have enough information to understand the link destination and can't announce it to the user. I suppose that is not alright ?</p>
  <p>How do I make sure that the usage is semantic as well as accessible?
  Should I be using a button instead?
  Or should I be adding some other information to the link with aria-label ?
  Or is it actually ok for accessibility to have links with href=&quot;#&quot; ?</p>