Nowadays emojis are part of human communication. They’re on chat apps, graphic design banners, websites, everywhere…
Some people dislike its use on marketing and content; I personally like, sometimes more than icons. And, in order to use them on the web we need to follow some rules; to make it accessible for every one!
First of all, what is an emoji?
Following the wikipedia definition of an emoji, it is an ideogram used in electronic messages and web pages. They’re inspired by pictograms and their predecessor were the emoticons.
So, basically, an emoji is an image that represents a person, an object, a letter or a number. And, those images are nothing but unicodes converted to visual representations.
What could go wrong using it?
As any text or image, the interpretation of an emoji is subjective - every person will have their own. So, beware when using an emoji, because it could mean a totally different thing from what you want.
If you use an eggplant emoji, this could mean another thing from what you want!
I don’t consider it as a problem, but every platform has its own visual implementation of emojis. Facebook, Twitter, Apple, Google… Everybody has own emoji styles, and it could affect the emoji’s use context.
I like to put emojis no my projects’
README.mdfiles - when I see the file on a MacOS device, the emojis’ style are completely different compared to a Windows device.
Since they’re unicode characters converted to images, it could also lead do misunderstandings for disabled people - visual, cognitive. That’s why we need to choose a clear communication line, use them (emojis) in a safe way.
Using emojis on HTML
You may heard or know a lot of different techniques to use emojis on your page, independent of the platform you’re using - WordPress, Jekyll, plain HTML, any JS framework (React, Vue, Angular, Svelte…). But, there’s a simple way to use them, and I’m gonna show you:
<span aria-label="Ice cream emoji" role="img">🍦</span>In the example above, we’re using WAI ARIA attributes to give the emoji a semantic meaning - and it’s very useful for screen readers, for example; because we’re ensuring the meaning of the emoji used.
- The
aria-labelattribute will define a label to the element; - The
roleattribute will define how the element will behave: in this case, it’ll behave as an image.
About WAI ARIA
The WAI ARIA attributes can be used with any front-end framework, and will be interpreted by every browser. It can be used in addition to the new HTML5 semantic tags (article, header, footer, aside…), to provide more contextual information about your page’s elements. They can be divided by three categories:
1 - Roles
Roles will define how the element will behave inside the document - an image, a list, an article…
2 - Properties
Properties will add semantic context to the element. They’re used to pass information about the element for the browser and users.
3 - States
States will tell the browser what’s going on with the element at an specific period of time - if the element is enable/disabled, hidden, open/closed…
The WAI ARIA working draft is from 2008, and in 2014 it became a complete W3C Recommendation - so, it’s been there for a while. It can be hardly used with accordions, dropdowns and many other components with visual interactions.
A curiosity: since version 2.3.2, Bootstrap implements the WAI ARIA attributes on its markup.
