What are pros/cons of using buttons instead of plain links to download a document
My company is using some rather bizarre download buttons associated with documents that can be downloaded:
It looks like these are abused anchor (<a>) elements which show up in a browser as javascript:void(0). If you left-click on them, something magical happens and the document is downloaded. If you right-click on them, you get a browser popup dialog saying
Right click is disabled for this asset! You can still download via direct/left click.
I find this abhorrent (as compared to plain old hyperlinks) but I can't put my finger on why, and I would like to pass along some reputable article that talks about pros/cons of plain hyperlinks vs. "magical" action-on-click.
Could someone help me find a reputable source for when/why to use plain links or "magic" buttons? The best I could find is https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a which says
onclick events
Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
Use a instead. In general, you should only use a hyperlink for navigation to a real URL.
So MDN suggests a <button>... but if someone is downloading a document, why/when should that be the case instead of a plain hyperlink?
Similar content on https://www.30secondsofcode.org/articles/s/javascript-void-links
Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a , or tag. After all, a link should always behave like a link and hijacking it with JavaScript or any other means is bound to run into some accessibility problems sooner or later.
Again, the advice is use a button or other element... but why use a button? what is the advantage of doing so?
other references I've found: