← All writing
 ·  1 min read

HTML Close Button The Right Way

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

HTML Close Button The Right Way

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.

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