HTML Close Button The Right Way

close signage on door

Coding an HTML close button seems simple. But, the only thing simple about coding a close button is getting it wrong.

The biggest mistake is using the wrong HTML element. I’ve used <a> and <div> as a close button many times (<button> is the correct element). The second mistake is not using proper ARIA properties.

HTMHell has a detailed article on the topic. Ultimately, to code a close button correctly you simply need to slow down and be thoughtful.

<button aria-label="Close" type="button">
  <span aria-hidden="true">×</span>
</button>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.