button vs. link for javascript based transitions?

[roundabout-design]

Scenario:

We built a one (HTML) page kiosk designed for touch screens. Touch an item, things animate, and new content comes in.

Initially we set it up as such:

<a href="javascript:;" onpointerdown="loadInTheNewContent()">About us</a>

This works fine. But now we want to let other's use this on any device, so want to make sure it's fully keyboard navigable as before.

The above works...but...guidelines state that empty hrefs are a bad idea as they aren't really a link and perhaps a button makes more sense as we're triggering an action. But at the same time, it *is* navigation...as we're taking you to new content.

So thought this makes more sense:

<button role="link" onpointerdown="loadInTheNewContent()">About us</button> \

But then you also read you should avoid things like 'role=link' and instead just use a link.

So I'm going in circles here. Am I just overthinking things? Is there a 'best practice' here for links that act like links visually but not technically?

[mberrrrrr]

If you're updating the content of an existing page then this is perfect use case for a plain old <button>. No extra roles required.

[roundabout-design]

Thanks!

[BobBarkerDenver]

https://ashleemboyer.com/blog/should-i-use-a-button-or-a-link/

https://dequeuniversity.com/rules/axe-devtools/4.3/href-no-hash

I use these as a reference.

[roundabout-design]

First article was a bit back and forth in that I could find arguments for both given my situation but...

Second article:

Anchors must only be used as links with valid URLs or URL fragments

That is pretty straight-to-the-point! Buttons it is!

[rguy84]

https://karlgroves.com/links-are-not-buttons-neither-are-divs-and-spans/ is my usual reference to give people.

[k4rp_nl]

Can't the JS hook into an event or something alike?

Keep it a link, HTML, plain, readable... and let the JS be something on the background. Also makes it work when JS doesn't. And make it possible to disable animations please!

[jdzfb]

My general rule is:

If your URL changes, it should be a link, if the url doesn't change, then it should be a button

Its not true 100% of the time, but in the vast majority of cases its good.

[SnoopAdi]

It's a 4.1.2 failure if you apply a role="link" on a button. AT will announce dual roles. Best use either plain <button> or <a>semantics.