1

Emojis and accessibility: How to use them properly

 2 years ago
source link: https://uxdesign.cc/emojis-in-accessibility-how-to-use-them-properly-66b73986b803
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Emojis and accessibility: How to use them properly

Examples of emoji emotions: laugh, angry, confused, and love emojis

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

do and don’t example: like button with text on the left for do section and like button with an emoji of thumbs up on the right for don’t section
do and don’t example: like button with text on the left for do section and like button with an emoji of thumbs up on the right for don’t section
Use words to convey a clear call to action

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.

do and don’t example: paragraph on the do section without emoji and paragraph on the don’t section with multiple emojis inside the paragraph
do and don’t example: paragraph on the do section without emoji and paragraph on the don’t section with multiple emojis inside the paragraph
You don’t need to use emojis in an already busy text

We certainly can get overboard with emoji usage, especially when they offer thousands to use. 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

do and don’t example: button with copy let’s go followed by oncoming fist emoji on the do section and button with copy let’s go with three emojis of oncoming fist before the text on the don’t section
do and don’t example: button with copy let’s go followed by oncoming fist emoji on the do section and button with copy let’s go with three emojis of oncoming fist before the text on the don’t section
The right image will be read as “oncoming fist oncoming fist oncoming fist let’s go”

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

do and don’t example: emoji at the end of the sentence on the do section and emoji in the middle of the sentence on the don’t section
do and don’t example: emoji at the end of the sentence on the do section and emoji in the middle of the sentence on the don’t section
You will hear “wrapped gift” in the middle of the sentence as the screen reader reads out the sentence

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

do and don’t example: widely known gestures like hand waving for hello and thumbs up for likes on the do section and not widely known gestures like Vulcan hand for hello on the don’t section
do and don’t example: widely known gestures like hand waving for hello and thumbs up for likes on the do section and not widely known gestures like Vulcan hand for hello on the don’t section
What’s a Vulcan salute?

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

do and don’t example: Smiley face emoji on the do section and the smiley face emoticon combining colon and right parenthesis on the don’t section
do and don’t example: Smiley face emoji on the do section and the smiley face emoticon combining colon and right parenthesis on the don’t section
Why use emoticon when you can use emoji?

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

do and don’t example: Hand waving emoji using neutral yellow on the do section and hand waving emoji using dark skin placed on black background and hand waving emoji using light skin placed on white background on the don’t section
do and don’t example: Hand waving emoji using neutral yellow on the do section and hand waving emoji using dark skin placed on black background and hand waving emoji using light skin placed on white background on the don’t section
Neutral emoji skin colour is more versatile than dark or white skin on emoji

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 emoji 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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK