{"id":1848,"date":"2025-01-11T19:39:00","date_gmt":"2025-01-11T18:39:00","guid":{"rendered":"https:\/\/cerovac.com\/a11y\/?p=1848"},"modified":"2025-01-13T11:21:56","modified_gmt":"2025-01-13T10:21:56","slug":"accessibility-of-emojis-for-list-bullets-potential-issues","status":"publish","type":"post","link":"https:\/\/cerovac.com\/a11y\/2025\/01\/accessibility-of-emojis-for-list-bullets-potential-issues\/","title":{"rendered":"Accessibility of emojis for list bullets &#8211; potential issues"},"content":{"rendered":"\n<p>Sometimes we want to make our (social media) posts to stand out. Well, I guess that on some social media we want the posts to be noticed as much as possible. And when authoring tools don&#8217;t allow formatting, then we can quickly reach out to other characters and emojis to make things more visual.<\/p>\n\n\n\n<p>With that we can cause a lot of noise for people using screen-readers or refreshable braille displays. Especially if we don&#8217;t consider what are the built-in alternative texts for the emojis that we use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demo video with a screen reader (NVDA)<\/h2>\n\n\n\n<p>I often suggest people should take it easy on emojis when I provide <a href=\"https:\/\/cerovac.com\/a11y\/accessibility-services\/\" data-type=\"page\" data-id=\"1513\">accessibility trainings and courses<\/a>, and to save some time I made a simple video (and <strong>manually added captions<\/strong> as even speaker view just shows graphical emojis and not their text) that I can use to demonstrate potential problems with using emojis to make list bullets;<\/p>\n\n\n\n<style>\n.video-container {\n  position: relative;\n  padding-bottom: 56.25%;\n}\n\n.video-container iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n<\/style>\n\n\n<div class=\"video-container\">\n<iframe width=\"1280\" height=\"720\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/rbvEqCi-NgU\" title=\"Video - Accessibility for emojis for list bullets - potential issues - demo\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\n<\/div>\n\n\n\n<p>The main point of the demo &#8211; emoji like \ud83d\udc49\ud83c\udffd is announced as &#8220;backhand index pointing right: medium skin tone&#8221; &#8211; waaaay too noisy and disrespectful for people depending on screen-readers or refreshing braille displays.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Compromise solution<\/h2>\n\n\n\n<p>I get it &#8211; some will argue that using old school bullet points can&#8217;t make their posts stand out and will insist on using emojis. So what to do?<\/p>\n\n\n\n<p>Make sure you use emojis that are not &#8220;too noisy&#8221; is my recommendation.<\/p>\n\n\n\n<p>But where to check how noisy they are?<\/p>\n\n\n\n<p>Well, <strong>it turns out that different screen readers (may) provide different text descriptions for same emoji<\/strong>. That is another downside of using emojis like this, as we can&#8217;t really know if they will be consistently announced.<\/p>\n\n\n\n<p>Thanks to Steve Faulkner &#8211; we can <a href=\"https:\/\/html5accessibility.com\/stuff\/2022\/01\/17\/short-note-on-emoji-text-alternative-variations\/\" target=\"_blank\" rel=\"noreferrer noopener\">check the emoji descriptions for JAWS and NVDA (opens in new window)<\/a>, but I am still trying to find VoiceOver and TalkBack ones somewhere (please let me know if you have them).<\/p>\n\n\n\n<p>So &#8211; my compromise solution is to check if emoji you like is not too long (prefer single word) and check with multiple screen readers (to be aware of any inconsistencies).<\/p>\n\n\n\n<p>If that is too much work &#8211; just use <code>\u2022<\/code> (<a href=\"https:\/\/www.compart.com\/en\/unicode\/U+2022\" target=\"_blank\" rel=\"noreferrer noopener\">unicode bullet, opens in new window<\/a>).<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes they can be a huge burden and sometimes just a small annoyance. A quick reflection on what to think before using&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[95,10,169],"tags":[413,830,831,829,827,180,120,832,25,166,626,184,394,183],"class_list":["post-1848","post","type-post","status-publish","format-standard","hentry","category-a11y-demo","category-practical-a11y","category-social-media-accessibility","tag-braille","tag-bullet","tag-bullet-list","tag-demo-video","tag-emoji","tag-jaws","tag-nvda","tag-refreshable-braille-display","tag-screen-reader","tag-screen-reader-2","tag-social-media","tag-talkback","tag-video","tag-voiceover"],"_links":{"self":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/1848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/comments?post=1848"}],"version-history":[{"count":0,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/1848\/revisions"}],"wp:attachment":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/media?parent=1848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/categories?post=1848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/tags?post=1848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}