A11yAdvent Day 11: Emojis

Emojis are all around nowadays. Besides being cute and silly, they became an essential communication tool to suggest tone in the written world.

As Léonie Watson explains in her article about accessible emojis, emojis are still not very accessible to screen-readers unfortunately, and tend to be poorly or completely undescribed to their users. They are not reported as images in the accessibility tree, and they are not always assigned an accessible name. These are the 2 things to fix.

The role="img" attribute can be set to assign imagery semantics to a DOM node. The accessible name can be defined with the aria-label attribute. For instance:

span role="img" aria-label="Sparkly pink heart">?span>

That’s the strict minimum to make emojis perceivable to all. In his article about accessible emojis, Adrian Roselli expands on Léonie’s solution to include a small tooltip to display the emoji name as well which is a nice touch.

Of course, most web pages are not coded manually, which means the label will have to be dynamically inserted when an emoji is found. Programmatically finding emojis is just a regular-expression away so this is the easy part so to say.

Assigning the description programmatically is harder. It turns out there is no obvious way to retrieve the description for an emoji (also known as “CLDR short name”). Packages like emoji-short-name or emojis.json provide a comprehensive map for most emojis to access their English short name, so this could be a solution albeit it has its limits (lack of internationalisation, potential performance cost…).


This content originally appeared on Hugo “Kitty” Giraudel and was authored by Hugo “Kitty” Giraudel

Emojis are all around nowadays. Besides being cute and silly, they became an essential communication tool to suggest tone in the written world.

As Léonie Watson explains in her article about accessible emojis, emojis are still not very accessible to screen-readers unfortunately, and tend to be poorly or completely undescribed to their users. They are not reported as images in the accessibility tree, and they are not always assigned an accessible name. These are the 2 things to fix.

The role="img" attribute can be set to assign imagery semantics to a DOM node. The accessible name can be defined with the aria-label attribute. For instance:

<span role="img" aria-label="Sparkly pink heart">?span>

That’s the strict minimum to make emojis perceivable to all. In his article about accessible emojis, Adrian Roselli expands on Léonie’s solution to include a small tooltip to display the emoji name as well which is a nice touch.

Of course, most web pages are not coded manually, which means the label will have to be dynamically inserted when an emoji is found. Programmatically finding emojis is just a regular-expression away so this is the easy part so to say.

Assigning the description programmatically is harder. It turns out there is no obvious way to retrieve the description for an emoji (also known as “CLDR short name”). Packages like emoji-short-name or emojis.json provide a comprehensive map for most emojis to access their English short name, so this could be a solution albeit it has its limits (lack of internationalisation, potential performance cost…).


This content originally appeared on Hugo “Kitty” Giraudel and was authored by Hugo “Kitty” Giraudel


Print Share Comment Cite Upload Translate
APA
Hugo “Kitty” Giraudel | Sciencx (2023-01-27T02:39:49+00:00) » A11yAdvent Day 11: Emojis. Retrieved from https://www.scien.cx/2020/12/11/a11yadvent-day-11-emojis/.
MLA
" » A11yAdvent Day 11: Emojis." Hugo “Kitty” Giraudel | Sciencx - Friday December 11, 2020, https://www.scien.cx/2020/12/11/a11yadvent-day-11-emojis/
HARVARD
Hugo “Kitty” Giraudel | Sciencx Friday December 11, 2020 » A11yAdvent Day 11: Emojis., viewed 2023-01-27T02:39:49+00:00,<https://www.scien.cx/2020/12/11/a11yadvent-day-11-emojis/>
VANCOUVER
Hugo “Kitty” Giraudel | Sciencx - » A11yAdvent Day 11: Emojis. [Internet]. [Accessed 2023-01-27T02:39:49+00:00]. Available from: https://www.scien.cx/2020/12/11/a11yadvent-day-11-emojis/
CHICAGO
" » A11yAdvent Day 11: Emojis." Hugo “Kitty” Giraudel | Sciencx - Accessed 2023-01-27T02:39:49+00:00. https://www.scien.cx/2020/12/11/a11yadvent-day-11-emojis/
IEEE
" » A11yAdvent Day 11: Emojis." Hugo “Kitty” Giraudel | Sciencx [Online]. Available: https://www.scien.cx/2020/12/11/a11yadvent-day-11-emojis/. [Accessed: 2023-01-27T02:39:49+00:00]
rf:citation
» A11yAdvent Day 11: Emojis | Hugo “Kitty” Giraudel | Sciencx | https://www.scien.cx/2020/12/11/a11yadvent-day-11-emojis/ | 2023-01-27T02:39:49+00:00
https://github.com/addpipe/simple-recorderjs-demo