Logout route or function for accessibility in a SPA

Question

Is there any difference if we use

• a link with a route: <a href="/logout">Logout</a> , or
• a button with a function: <button onclick="logout()">Logout</button>

in terms of accessibility?

The /logout route would basically just redirect to /login. The same would happen when using the logout() function.

Are there any pro / cons for one or the other?

Answer 1

Not a complete answer, just some things to add:

You already understand the general use case of when to use a link (navigation) vs a button(JS based actions).

This is how i usually think about that in SPA:

In case of Login/Logout or form submission, although the "action" can navigate to a new page but it is indirect, it first needs to be handled and processed by the SPA based on which the decision to route is taken. Also, it doesn't make sense to allow Login/Logout to be opened in a new tab which links provide by default or for it to be bookmarkable.

Also think about what you do with SignUp or Login, they are buttons.

So i would go with a Button in this case.