Kaomojis are emoticons that use a combination of text characters to represent faces and other visuals. The precursor to emojis we know and abuse. For example, (╯°□°)╯︵ ┻━┻ or ¯\_(ツ)_/¯, ᘛ⁐̤ᕐᐷ, or the classic :(.
When a screen reader announces them, it’s frequently not helpful. For the table flip kaomoji, VoiceOver announces the characters and symbols in Japanese that aren’t words or sentences, as far as I could tell. Interestingly, VoiceOver announces the frown kaomoji as “frown,” which makes sense since it’s a common one that’s been used for decades. Emojis, on the other hand, are usually announced with helpful descriptive text. 😹 is announced as “laughing with tears cat face.”
To make kaomojis and other text-based visuals accessible, add role="img" and aria-label. For more details, read the Web Accessibility Initiative’s (WAI) article Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak.
<span role="img" aria-label="Person flipping a table">(╯°□°)╯︵ ┻━┻</span>I do wonder if using visually hidden text would be better because some browsers don’t translate aria-label. Although, copying the text would copy the visually hidden text along with the kaomoji. I may be overthinking it.
If you want to get sidetracked and go down an emoji rabbit hole, Face with Tears of Joy: A Natural History of Emoji sounds fun. I haven’t read it yet; it’s on my list. He also wrote Shady Characters, which is a wonderful book. Isn’t it‽
Did you know?
Some emojis are made up from other emojis chained together with a zero-width joiner (\u200D). I was blown away when I first learned about this. Useless trivia? Maybe not. This could be useful to know if you need to do character counts that contain emojis because 🐻❄️ is four characters long!
'🐻❄️'.split('\u200D');// [ '🐻', '❄️' ]
'👩🔬'.split('\u200D');// [ '👩', '🔬' ]
'👩💻'.split('\u200D');// [ '👩', '💻' ]