##Choosing between a Button or a Link
One of the habits that make such a huge difference is knowing when to choose a button and when to choose a link during development. Before making that decision, there's one question that can clear everything up.
Does this GO to another url or does this DO something instead?
In other words, does this go somewhere like another page within or outside the site? Or does this do an action - like prompt a modal, submit a form, trigger the mobile menu to appear, reveal hidden content, and so on?
If it's an action - and not a destination, then a button element is what we want to use. This is why a link looks strange when we write it like this:
<!--- THE FOLLOWING EXAMPLES SHOULD NOT BE USED WHEN CODING FOR A11Y -->
<a href="" class="modal-trigger">Sign up for our newsletter!</a>
<a href="#" class="modal-trigger">Sign up for our newsletter!</a>
<a href="javascript:void(0);" class="modal-trigger">Sign up for our newsletter!</a>
<a class="modal-trigger">Sign up for our newsletter!</a>
It's because the above links are not being used semantically. A link is meant to have a destination in its href attribute. If it doesn't have a destination, then it should likely be a button. Empty or incorrectly filled links confuse screen readers. Buttons also have native keyboard access so long as :focus styles are in place. Buttons also contain everything they need to work with assistive technologies. Karl Groves has a great in-depth article diving into buttons if you're interested in why a button is recommended over a "no destination" link DOM wise.
We can use buttons inline with links in menus and they can be styled just as any other element. They're not limited to just being used in forms. Here's what a button looks like as a modal trigger instead of using a "no destination" link like the examples above.
<button name="newsletter-modal-trigger" class="modal-trigger">
Sign up for our newsletter!
</button>
There you have it. Semantically, an <a> element should only be used for links that go somewhere. If it goes to a url, continue using links. If it's an action instead, a <button> is the semantically correct and accessible element to use.