I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

use × HTML entity for close buttons rather than the letter X for a perfectly angled ×

Aug 18 2014

I posted this simple tip to twitter and it was instantly popular with developers from all around the world. It’s a small improvement that makes a big visual difference in your applications.

Since a tweet is only 140 characters, I thought I would expand on best practices a little bit in a post.

Using UTF-8

A few mentioned that you can just go ahead and use the unicode × instead of the HTML entity ×. As long as your document is setup for UTF-8, go ahead. I personally rather use the HTML entity × because I can remember and type that, whereas × needs to be copy and pasted from a blog post like this.

Accessibility

If a visually impaired user uses a screenreader like JAWS to access your website, this will read multiplication to them. So, it is very important that you use proper aria attributes. Something like this will work great:

<a href="#" aria-label="Close Account Info Modal Box">&times;</a>

or better yet:

<button aria-label="Close Account Info Modal Box">&times;</button>

Other Appropriate Characters

A few more mentioned that it would be better to use &#x274C; and &#x274E; as they are real × characters rather than just the multiplication sign. While these are great, they are 1) Not supported on many systems. I’m on osx 10.9.4 and Chrome Canary and they are just boxes. ❌ ❎ 2) twitter and the iPhone swap them out with goofy looking emojis.

So unfortunately, not a good solution just yet.

This entry was posted in HTML5. Bookmark the permalink.

3 Responses to use × HTML entity for close buttons rather than the letter X for a perfectly angled ×

  1. Nixsur says:

    I didn’t know that. I always used ‘X’ char xD.

  2. SelenIT says:

    Wikipedia gives some more options for “X mark” (http://en.wikipedia.org/wiki/X_mark#Unicode), including ╳ (U+2573, BOX DRAWINGS LIGHT DIAGONAL CROSS) which Twitter doesn’t swap out with emoji (at least in desktop web version). Wouldn’t any of these be better than multiplication sign?

  3. Hi Wes

    I just noticed that on mobile devices (both Android and iPhones) the ❌ is always rendered in red. I think that may be a relatively new behavior as I have found no mention of this on the web anywhere. I just thought that you should know…

Leave a Reply

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