#1 button disguised as a link

submitted on by Manuel

Bad code

<button role="link" title="Name of website" tabindex="0">
  <img alt="Name of website" src="logo.jpg" title="Name of website">
</button>

Issues and how to fix them

  1. Wrong usage of the button element. There’s an element for linking to external sites (<a>). Do not change native semantics, unless you really have to.
  2. It’s possible to link to pages without JavaScript.
  3. The title attribute is redundant.
  4. The tabindex attribute is redundant. A button doesn’t need tabindex, it’s focusable by default.

Good code

<a href="https://">
  <img alt="Name of website" src="logo.jpg">
</a>