Happy Emoji Day! The Best Accessibility Practices To Use Emojis on the Web

A few tips that you should apply if you use emojis or icons on your website#accessibility#webdev#html

July 17, 2020 · 2 min read

Today is the World Emoji Day and because of that I'm going to share with you two tips that will make your Emojis accessible to people using screen readers:

1. Replacing Text with Emojis

The first one is going to be useful when we are replacing text with emojis. As an example, we could use the red cross emoji instead of the text "Delete" in a button that triggers the deletion of a record in our app, let's see the bad approach and the good one:

The bad approach: This button is not accessible, it will confuse the user because of how emojis are read by screen readers.

<button>❌</button>

The good approach: This button is now accessible, we have wrapped the Emoji in a <span /> tag that has the role=img and aria-label attributes.

For a screen reader, the emoji will behave like an image with a description, and it will simply read it's description making this code accessible!

<button>
  <span role="img" aria-label="Delete">❌</span>
</button>

2. Using Emojis as Decoration

This case is useful when we are using emojis as decoration, that's also when we don't want screen readers to see them, and for that we can use the aria-hidden attribute with the value true.

Here's an example with a bad and a good approach:

The bad approach: This button is accessible but doesn't follow the best practices as the screen reader will try to read the emoji and that will create unnecessary noise for the user.

<button>❌ Delete</button>

The good approach: This button will work perfectly in screen readers because we're telling it to ignore the emoji. That's it!

<button>
  <span role="img" aria-hidden="true">❌</span> Delete
</button>

It works with icons too! 🤯

It can't be all about emojis today, I'm pretty sure your app has icons, maybe you got those from FontAwesome? Material? An SVG you created?

Are they accessible? Because the tips we just saw also apply for icons!

So... even if you don't use emojis, what are you waiting for? Go and make your apps more accessible!