Buttons in nav instead of anchor?

Question

I've been reading up on web accessibility and read that anchor tags should only be used when the user will be taken to another URL without JavaScript. But buttons should be used whenever some other behavior should happen, such as opening a modal.

So I'm wondering if it's okay or expected to have both buttons and anchors in a nav. Something like this:

<nav>
  <a href="/">Home Page</a>
  <a href="/about">About Page</a>
  <button>Sign Up</button>
</nav>

Say in this situation the signup button launches a modal or does some other behavior that doesn't take the user to a different URL. Is it okay to have both in the nav? I'm not concerned about styling, I'll make these look consistent, but I'm wondering what's the most correct way to handle something like this?

Answer 1

From an accessibility perspective, using both links and buttons is the semantically correct way to go. The links take you to another page (or somewhere else on the current page) and buttons perform an action. A screen reader user will understand when they hear "link" or "button" in the same <nav> that different actions will happen.

Answer 2

As mentioned in the previous comments, yes, it is completely fine to use both inside your navigation.

If you really want to you can use <a> elements for all, but for the buttons you would include the role="button" attribute which is semantically equivalent to using <button>.

<nav>
  <a href="/">Home Page</a>
  <a href="/about">About Page</a>
  <a role="button">Sign Up</a>
</nav>