What are pros/cons of using buttons instead of plain links to download a document?

Question

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 <button> 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:

• Orange Digital Accessibility: Best practices for download links
• CSS Tricks: Building a Good Download… Button?
• W3C WHAT-WG: Downloading resources
• NCSU IT Accessibility: Link Behavior
• SonarSource: Links should not target "#" or "javascript:void(0)"

Answer 1

Buttons denotes important actions, therefore they are scarce and noticeable.

Links are common, and you may have a lot of them, since they are supposed to take you to an anchor, whether it's on the same page or another page (hence the <a> tag for anchor).

You can style an element to look like a button. As a matter of fact it's pretty common. However, it's not the same in terms of semantic code and accessibility. For example, if you use a screen reader, you can use the space or enter keys on buttons, but <a> tags only react to enter key. Therefore, if you see an <a> element disguised as a button and you press the space key and nothing happens, you'll be quite confused.

Additionally, using a button (when correctly used), provides a hint to user about an important action with just a quick scan, something very difficult to achieve with a text link

So, in this particular case you mention, a button is the right choice, there's nothing bad about it.

You can read more in the article "Proper Use of Buttons and Links" and the book "Don't make me think" by Steve Krug has a section about this subject when it talks about affordances

Answer 2

So MDN suggests a ... but if someone is downloading a document, why/when should that be the case instead of a plain hyperlink?

Right from your quote:

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.

When I download a PDF, I never know if it's going to download itself as a file, or open right there. Often times, I want to keep using the website to look for other info. I'll often always open links in a new tab by using middle click. If the link is a "fake" one that goes to some worthless URL, that just sends me to the page I came from.

---

could you point me at any reputable references

MDN, as you cited, sure is one! It's the preferred source of documentation by Mozilla, Google, Microsoft, the W3C, and Samsung. But here's straight from the W3C spec:

An HTML <a> element is defined as:

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

What is a hyperlink?

These are links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.

javascript:void(0) is not a place that anyone would like to "visit...in a browser or download", while an actual link to the download sure would be.

Also, here's a university (NC State), and from Ancestry.com's design team.

Answer 3

I like Devin's summary that "buttons denote important actions". I would pair that with a statement that applies more to the current generation of Internet users than yours & mine: "Links denote locations." In fact, following modern Internet norms, I might assume that such a link is likely to lead to one of those "Your download should start in 5 seconds..." pages.

For those like you and I who know how the Internet works or used to work, a file is a location. But to a younger user, there's actually something quite sketchy about the idea of linking directly to a file. (In fact, I just asked my younger brother about hyperlinks for downloading, and he spotaneously used the phrase "less credible".)

This generation is not used to actual file locations being exposed, but rather handled and often obfuscated programmatically. For example, to download your digital goods or get a PDF of a receipt may be an API call rather than a file sitting on the server. That said, there are certainly exceptions, including big-name ones like Amazon, which gives a hyperlink for downloading your receipt...

As for the actual button behaviour, that's a slightly different question. First of all, it's indisputable that JS void action links are anti-user. They defeat several interactions you can otherwise do with links, as you noted. There are two reasons to use them:

1. You can't figure out how to implement the behaviour as an actual link. For example, perhaps you download the file via some sort of download manager–like behaviour.

2. You want to disable the additional interactions, ensuring that direct button activation is the only way. For example, perhaps you want to obscure the mechanism by which it's downloaded.

If neither of those conditions apply, I would say the button is a step in the right direction, but it should be implemented as an <a> tag with some CSS styling, thus retaining the additional interactions.

---

Incidentally, note that the design of your company's button is not the most attractive or modern. Here are a few options in a continuum from plainest to most semantically rich and easy to identify. (The reason I include this is because we're talking partly about the user's interpretation of download links and buttons, and I consider that the format & symbology contributes to that interpretation.)

Answer 4

There are other good answers about the issues around javascript:void(0) but for me, the question about whether or not it is more appropriate to use a link or a button comes down to whether the download is simply a URL (in which case a link should be used) or something more complex (POST request, API action, etc.) in which case a button is more appropriate.

Basically, if I can access the file simply by pasting a URL into my address bar, then I would expect to see a link to that file, rather than obfuscating it via JavaScript.

I think it is reasonable to use styling to stop it looking like a standard link and more of a call to action - even to the extent that it looks like a button, if that is more intuitive for your audience - but you should ensure the underlying semantics are appropriate, first.

(FWIW I've also done it the other way round, e.g. where - for technical reasons - I've needed to implement 'cancel' as a button. However, as it is conceptually just a link back to some other page, I styled it to look like a normal anchor tag.)

Answer 5

Another factor here--it's an anti-hotlink defense. If no URL pointing to the file exists nobody can hotlink it. It's also hidden from robots.