HTMHell supports Black Lives Matter. ✊🏾 Code is always political.

#5 button-like-link

submitted on by Vadim

Bad code Bad code

<a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Register&nbsp;&nbsp; </a>

Issues and how to fix them Issues and how to fix them

It’s a link to a form at the same page that looks like a button.

  1. By adding role="button" to a link, you’re telling that it’s a button, though it acts like a link. Do not change native semantics, unless you really have to.
  2. aria-haspopup="true" suggests that there’s a popup, but it doesn’t exist.
  3. Padding should be added via CSS, not &nbsp;.

Good code Good code

.button {
  /* use CSS to apply button-like styles to the link */
}
<a class="button" href="#form"> Register </a>