As the web enthusiast that I am, I do prefer that links who takes me to different pages or sites actually use an anchor, and not a button. That is, that in the DOM-tree, it is coded as an a-tag with an href-attribute. By all means - attach an event listener, and do your magic if you must, but please avoid using a button instead of an anchor.
The reasons for using an anchor are plentiful: Screen readers will know that it is a link, which takes you places, and not a button, that only emits actions. You can right click the link, and open it in a separate tab or window. You can hover over the link, and see where it takes you. But recently I experienced even another good reason, that I haven't contemplated earlier!
We had a page that became irresponsible due to a javascript bug: A React component was re-rendered in infinity, due to some malicious state update inside a useEffect. The page was merely a navigational page, with lots of buttons for navigation. The buttons was deemed useless, due to the bug. But: If we had used anchors instead of buttons, the page would still have been working just fine! The bug would still be there, of course, but our end users wouldn’t even know that the page was buggy.
Of course, I fixed the re-rendering bug as well. But before I did so, I confirmed that using links worked, despite the bug being present. And I guess the morality of the story is, that even when javascript runs amok, and kills most of the interactivity and dynamic behaviour on the page, completely normal, good old anchors, still works as a charm!
So no need breaking the web with navigational buttons!
Top comments (0)