Emojis and accessibility: How to use them properly
Who doesn’t love emojis? I’m willing to bet that the recent 10 messages you sent or received from different people on your phone, there will be at least one emoji in it.
It’s hard to completely avoid emojis nowadays, and it’s not just for younger generations either, older generations have embraced emojis too. My mother and my mother-in-law who are well over 50 absolutely LOVE emojis, it’s not rare that I see their text message replies only in emojis, especially that ‘thumbs up’ emoji they love so much. In tech, start-ups seem to be addicted to using the ‘rocket’ emoji, it’s seen all over the website and apps, and maybe they can’t help using the ‘fire’ emoji in their call to action, and I can’t blame them, they do convey a friendlier tone of message.
As our work communication language is becoming more informal, texting and reading text on the web or apps have become more emotional, human, and efficient in experience, thanks to emojis. Their ability to convey emotions and feelings might be just the best thing about them. But I’m not here to talk about how cool emojis are (because we all know that already), but rather how we can use emojis properly in designing products to be more inclusive.
1. Do not use emojis to replace words
This goes without saying that it doesn’t matter how descriptive or clear emojis are, it should never replace words in use. Emojis are very helpful in enhancing the experience, but words are still king. Only using emoji by itself will completely change the message as a screen reader reads only the alt text description of that emoji, therefore, it will increase the likelihood of people interpreting the emoji differently as you intended and it will increase the cognitive load massively as they have no text to work with as a base message.
2. Do not use repeated or too many emojis.
We certainly can get overboard with emoji usage, especially when they offer thousands to choose from. But let’s keep it clear by using one emoji in a text or only use them when necessary. Remember that emojis have alt text descriptions embedded in them and they will be read out by screen readers. So in the example on the right, you will hear “..being down over the weekend for the festival party popper there. I will be making October plans pencil pencil once there and will try to arrange so I’m back here for birthday wrapped gift birthday cake balloon if possible..” with a screen reader, therefore, make sure you know what your text will be read as including the emojis.
3. Do not put emojis before any important message or call to action; text comes first
Emoji always comes after a text, never before. As we established that words are king, they should always come first. We want people to get the message first. By using emojis before any text will give a bad user experience for users with a screen reader. I have noticed some productivity apps have adopted emojis into their component, which is completely fine, but the issue may occur when the emoji comes first before the text. Emojis work slightly different than icons, so we should treat each differently.
4. Don’t put emojis in the middle of words
Similar to the point above and before, we should reserve emojis for the end of a sentence. Putting an emoji right in the middle will severely confuse screen reader users as they will hear the alt text description of an emoji to be a part of the message. Emojis are most helpful to enhance meaning at the end of a sentence.
5. Use clear emojis that are widely known for all audience
Avoid ambiguous emojis that are likely to be interpreted differently by people, because not all emojis are equal in clarity. Remember that we are trying to be as inclusive as possible, we want to cover as diverse as possible for our users, and our users may comprise of people with different backgrounds such as age, culture, religion, nationalities, etc. Interpretation can depend on the reader’s background, so an emoji might mean something completely different than what you interpreted, which can cause confusion in your message.
Do not make your audience guess what emoji you used in relation to your message. They will save more time reading your content when they don’t need to guess any emojis.
6. Do not use emoticons
The great thing about emojis is they have alt text description embedded in them it can be parsed by a screen reader as text whereas emoticons are just manipulation of symbols and punctuation marks that will be read just that: punctuation marks. Screen reader users might mistakenly take this as grammatical errors or typos in your message. Some blind users and low vision users definitely will recognise ‘colon right parenthesis’ immediately as a smiley face, but people who are less familiar with texting may not immediately recognise it. But the real problem lies when you’re using a long string of different punctuations to create an emoticon such as the ‘shrug’ emoticon: ¯\_(ツ)_/¯
7. Use emojis that work well on both light and dark backgrounds
The rule contrast of accessibility still applies here. Be sure to test your emojis against dark backgrounds and light backgrounds. Do not use light emojis on a light background, and vice versa, if an emoji has a few varieties of shade, use the one that works best on both light and dark backgrounds. If there’s ever a case of your chosen emoji doesn’t work well on light or dark backgrounds, there should be enough alternatives for you to choose from out of all those thousands of emojis, for example, there are about 5 emojis for ‘cake’ alone.
Pro tip: avoid dark or light skin colour in emoji use, keep it neutral yellow as it has the best contrast against dark and light backgrounds.
Conclusion
It’s well good fun using emojis in writing, I use them quite often too. But when it comes to adopting emojis in a product design, we need to be aware of the people using the product. Blind users and low vision users heavily rely on the texts and alt text descriptions we put in our product, they don’t digest imagery and emojis the way non-blind users do, that’s when we draw the line of using emojis in the products to avoid bad user experience for a certain group of users. Designers need to ensure that the default position of the products we design is as accessible as possible and we’ve considered ALL of the users as part of our basic vanilla product offering.
Translated version for Japanese readers:
Thanks to Yuki from Kotoba UX for translating.
Translated version for Portuguese readers:
Thanks to Marina Meireles for UX Collective Brazil for translating.
