Making Emoticons accessible is something often ignored while exchanging information on the web. Emoticons share expressions, feelings and different other messages in the modern digital content. Conveying these expressions to assistive technologies such as screen readers is something often developers forget or ignore. Let us understand how to make emoticons accessible and assistive technology friendly.
Including emoticons in your markup
Emoticons can be added to your markup in various ways. Explained below are few of them. It is not necessary that every technique provided below can make emoticons accessible or may be suitable for the screen reader / browser combination. Pick the suitable one for your need.
Direct insert of emoticons
๐
๐
This technique may not be ideal in all situations. To make it more screen reader friendly you can add ARIA roles and properties to it.
Direct insert of emoticons with ARIA substitute
๐
๐
By inserting ARIA role img and aria-label, screen reader users will identify the emoticon with accessible name. This method also recognizes the emoticons as images with the use of role img.
Unicode values for emoticons
๐
๐
๐
Using Unicode values is the old and most preferred method for emoticons. The complete list of unicode values can be found here. The emoticons marked-up using unicode values are accessible in general.
Hexadecimal values for emoticons
โ
๐
๐
In case the emoticons marked-up using Unicode values or hexadecimal values are not identified by screen reading technologies, they can be substituted with the aria techniques specified above.
Emoticon keyboards
As we discussed in our blog article titled accessibility problems on social media applications, users highly depend on emoticon keyboards that are available in the market. ON IOS I use a emoticon keyboard that has different symbols defined in different categories. VoiceOver recognizes each of them with appropriate accessible name. Like any other character on the keyboard I can just add that to my text area in any application. Here is some information on using emoticon keyboard with IOS. Some apps such as facebook messenger provides the user to pick the emoticons directly from the app. under expression picker.
Emoticon add-ons for screen readers
I recently found this NVDA add-on called emoticons. This is quite interesting. Being a screen reader user you might not know how to type in all the emoticons you could imagine. This add-on solves that problem for you. Once you install the add-on, press NVDA + i to open the insert emoticons dialog. Choose the emoticon you want. The emoticons below are thus written in this article.
๐
(handshake)
๐จ