• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Home
  • Blog
  • Search

Kevin Dees

Full-Stack PHP Development

  • Twitter
  • Github
  • LinkedIn
You are here: Home / Web / HTML Close Button The Right Way

HTML Close Button The Right Way

May 26, 2020 by Kevin Leave a Comment

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>

Filed Under: Web

Reader Interactions

Leave a Reply Cancel 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.

Footer

Get Dare To Code

Get the latest on full-stack PHP development in your inbox with a bi-weekly lesson from Kevin Dees.

Copyright © 2021 · Kevin Dees · Log in