The semantics of interaction vs navigation

Published on Monday, 7 December 2020.
At 223 words, this article should take about 1 minute to read.
This article is more than 2 years old.

It is commonplace for designers to style both links and buttons to look like “buttons”. But just because something looks like a button, doesn’t mean it is a <button> .

The general rule is to use <button onClick="function()"> to control in-page interaction and <a href="/path/to/link-destination"> to control navigation to a different page^†.

Examples of where to use a button element include toggling an off-canvas menu or loading more posts. If you are navigating to a different page - use an anchor link.

Never, ever, ever do this:

<button
  onClick="function(){ window.location.href = '/path/to/new/page.html' }"
>
  Click me
</button>

Assistive technologies will announce button and link elements differently and they can be activated in different ways depending on the element - use the wrong one and you run the risk of confusing the user.

^† The in-page “anchor” link is an exception to this. Always use an <a href="#anchor-link"> tag for that even though the user doesn’t leave the page. This is because it will modify the URL and helps the user find the content.

Again, the same effect can be achieved using JavaScript to manipulate the Browser History API but why would you write extra code to recreate something the browser gives you for free?!

Oh, and if you're missing the "smooth scrolling" that you can add with JavaScript, consider the fairly well-supported scroll-behavior: scroll; property.

Fin

onward-journeys module