Bad code
<a href="#" onclick="modal.open()">Login</a>
Issues and how to fix them
- If the
a
element has anhref
attribute, it represents a link to another resource like a page or a PDF document. - The purpose of the element in this example is to trigger an action on the same page with JavaScript. The
button
element with the type button is more suitable because it has no default behaviour and it’s designed to trigger actions on user input. - Browsers and devices that do not support JavaScript will not be able to access the content in the modal.
Good code
Solution #1: Use a button element
<button type="button" onclick="modal.open()">Login</button>
Since the only purpose of this element is to trigger an action on the same page instead of navigation; the <button></button>
element is the semantically correct element to use.
Solution #2: Add a valid href value to the login form
<a href="/login" onclick="modal.open()">Login</a>
Another solution is to add a href
value to a location where the same actions as the modal can be performed.
This provides a fallback for browsers and devices that do not support JavaScript. This is an example of progressive enhancement.