6

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?

1
  • You should also probably look into aria-roles which can provide hints to the assistive technology.
    – Stephen P
    Mar 14, 2019 at 20:27

4 Answers 4

8

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.

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>
1
  • 2
    It's semantically equivalent, but it doesn't have the same behaviour. Buttons, when focused, are activated using the enter or space keys; however focused links are only activated using the enter key. Links with a button role also need an extra keypress listener to fire a click event when the user presses the space key. It's simpler just to use a real button. Mar 20, 2019 at 7:02
1

Yes it's totally fine to use either buttons, anchors or even div inside the navbar however you want you can do it. You just need to be comfortable using css and styling which you say you are. Then you should have no problem. Does that answer your question?

1

Any flow content elements are allowed in a nav tag, and that includes buttons.

Not the answer you're looking for? Browse other questions tagged or ask your own question.