Web Accessibility - Button vs. Link ??
<button> element at MDN Web Docs
Probably one of THE issues when it comes to (in)accessible websites: When do I use a button and when a link? Is it ok for a button to look like a link and vice versa?
The answer to the first question is: A link takes you somewhere, a button does something. Or to put it differently:
- Link = Navigation
- Button = Action
Here is a real world example on how to confuse developers quite easily, because it is not clear whether one wanted to use a link or a button. Or rather a link with the functionality of a button. Or is it supposed to be the other way round?
The other example is from a popular tutorial website, showing how to use a button as a link:
I mean, one could just use an <a> element to get the job done but then it wouldn't look and feel like a button, right? And there's just NO WAY to style a link like a button, RIGHT? If you are interested in this topic, you can find a detailed article about designing buttons and links here:
A Complete Guide to Links and Buttons
Answer number two is: No. Buttons and links should be clearly distinguishable from each other. A button is usually characterized by the fact that the text describing the function is completely outlined. Links, on the other hand, stand out mainly because of their simplicity and the underline. They're also coming with different functionality and are interpreted differently by screen readers, which is way it's even more important to use the correct element.
Nevertheless, there are countless websites where buttons look like links (or vice versa) or even underscores are removed from links. Why? Probably because it is supposed to look good. In any case, it makes it difficult for the user to identify a link as easily as possible. In case you don't know what to use, here's a quote from me:
A link takes you somewhere, a button does something. Or to put it differently:
Link = Navigation
Button = Action