<a href="#" onclick="modal.open()">Login</a>
Issues and how to fix them
- The anchor tag is being used as a button instead of a navigational link. Its only purpose is to trigger an action on the same page. An anchor tag should be used for navigation; to create links to other pages, anchor points on the same page or to resources such as PDF files.
- In this case, the
hrefattribute contains a placeholder value that links to the same page but does not navigate to an anchor point.
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.