Close Button HTML: 10 Pitfalls and the Accessible Fixes

Manuel Matuzović has cataloged ten flawed HTML patterns for close buttons — ranging from placeholder links to icon-only elements that screen readers mangle.

<a class="close" onclick="close()">×</a>

The core issue? A close button isn’t a link, so an href-less anchor is both semantically wrong and unfocusable. Worse, the symbol itself often gets announced as “multiplication” or “times,” which helps no one.

Better patterns exist. When you want the visual “×”, you can still build it correctly:

<button aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
<!-- You should probably wire up the ESC key to trigger this too -->

…as long as you wrap that visual in an accessibly hidden label that tells assistive tech exactly what the control does.

Direct Link →