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>

Comments

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.

Get Involved & Explore More

an abstract painting with blue and yellow colors

Catch up on what I’ve been writing lately.

Show your gratitude.

Join Dare To Code Email List

Get emails from me on full-stack PHP development by subscribing to the Dare To Code mailing list.