#8 anchor tag used as button

submitted on by Sven

Bad code

<a href="#" onclick="modal.open()">Login</a>

Issues and how to fix them

  1. 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.
  2. In this case, the href attribute contains a placeholder value that links to the same page but does not navigate to an anchor point.
  3. Due to the above points, this element has accessibility issues. Browsers and devices that do not support JavaScript will not be able to access the content and functionality on the modal, and screen readers may parse the element incorrectly.

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.