The Good, The Bad, And The Ugly: Emojis and Accessibility

Join Natalie Garza and digital accessibility expert Natalie MacLees in episode 31 of the AAArdvark Accessibility Podcast. This episode talks about the implications of accessible emojis, exploring the good, the bad, and the ugly sides. Learn about specific WCAG success criteria, the role of emojis in aiding comprehension, and the challenges they pose for screen readers.

Natalie Garza: Hello, and welcome to the AAArdvark Accessibility Podcast. This is Natalie Garza. I’m one of the co-hosts, and with me today is,

Natalie MacLees: Natalie MacLees, the other co-host.

Natalie Garza: And she is a digital accessibility expert here to answer our questions. And this episode’s very cinematic topic is called ” The Good, The Bad, And The Ugly: Emojis and Accessibility”. 

So we’re gonna go over some WCAG success criterion that goes over emojis and why they can sometimes be good, bad, and ugly. So what is the first WCAG success criterion that we’re gonna talk about today that emphasizes the good in emojis?

The Good: Emojis Enhancing Accessibility

Natalie MacLees: Yeah, so I think we could talk about 3.1.5 for Reading Level, which is AAA, success criteria. But it’s one of the ones that I think is good to try to implement whenever you can. There are a few things in AAA that I think, even if you’re going for AA level compliance, they’re so helpful that I think it’s a good idea to try to implement them on any site where you possibly can, and Reading Level is one of them. 

And to meet that criteria, you would just make sure that you don’t have any content on your site that’s over about an eighth-grade reading level. So if you’re not in the United States, that would be about a middle school reading level, or like where you are in your early teens, so around the ages of 12 or 13. So around that reading level, is what you wanna go for to make sure that the most number of people are gonna be able to read and engage with your content. 

And where emojis can come into that is that they can help with comprehension, they can help with understanding some more complex information by presenting it in an alternative way. By highlighting certain things or kind of communicating, you know, “Hey, this is something you have to really pay attention to. This is a really important point,” right? Little emojis being sprinkled in there can communicate that kind of information and help with understanding.

Natalie Garza: Yeah. The one caveat with 3.1.5, though, is that the emojis still have to be accessible.

Natalie MacLees: They do have to be accessible, and I think one of the challenges with emojis, well, we’ll get into that I guess when we go into the bad.

Natalie Garza: Yeah, but in summary, emojis can be good. They can help break up content, they can help express content at a glance, right? 

But let’s go into the bad side of emojis, starting with 1.1.1 Non-Text Content Level A. 

The Bad: Challenges with Emoji Accessibility

Natalie MacLees: Yeah, emojis are in this kind of weird spot where they’re technically a font, but they’re not actually text content. So they’re non-text content, and they do get alternate text by default, but it behaves in kind of a weird way. 

So when you come across an emoji with a screen reader, the screen reader does not announce, “this is an emoji.” It doesn’t give the screen reader user any kind of notification that this is an emoji. It just reads the meaning of the emoji as though those words were typed out in the sentence. 

So I have a good example because my car has a feature that, while I’m driving, it will read text messages to me. So it’s essentially a screen reader. And one time I was meeting my friend at the park, and she texted me and she said, “There’s a puppy training class. Tears of joy.” Because she put the little tears of joy, which is the little laughing emoji with tears coming out of his eyes (😂), she had put that in there, so it was very funny. 

But again, like it just gets read like that. It doesn’t say, “emoji, tears of joy.” It just says whatever the meaning of the emoji was. Which makes it kind of weird, and especially if there’s several of them in a row, it’s hard to tell, “Was that an emoji or did they type that text? What’s happening here?” It could be really a really kind of odd experience.

Natalie Garza: Yeah. It can get confusing fast. Or, a lot of times, people like to do emoji lists.

Natalie MacLees: You mean for bullets?

Natalie Garza: Yeah. And like replacing bullet points.

Natalie MacLees: Yeah. And that’s confusing for the same reason, like if you use a regular bullet point list. A screen reader user will hear, “Oh, there’s a list with five items. Here’s the first item, second item, third item,” and let them know that there is a list there; if you just use emojis, they don’t get that context. 

And then they also are just hearing the emoji being read out at the beginning of each point. Like I said, it’s not always clear that it’s an emoji or if it was text that was typed because it sounds the same either way. And then the other big challenge is emojis aren’t always literal, right? They can have meaning other than what the emoji is, and sometimes that can get completely lost when you’re just listening to what the name of the emoji is. 

That kind of social or cultural meaning that we’ve layered onto several different types of emojis gets completely lost.

Natalie Garza: Yeah, their names are not very helpful, like “smiling imp” like he’s a little sneaky. He’s a little mischievous, but “smiling imp” does not convey that at all. (😈)

Natalie MacLees: No.

Natalie Garza: So all in all, emojis can be bad, but they can still be made accessible and there’s a few different ways to do that.

Natalie MacLees: Yeah, if you’re thoughtful about how you use them. They can definitely still be helpful. I would be careful about using too many. So that would be the first thing: don’t use several of them in a row. 

And don’t do a message that’s just emojis instead of text. Don’t do that. You can give them aria-labels or alt text, basically, if you really think somebody’s gonna be confused about why that’s there or what it’s doing. You can do that. It is an option. 

Or you could include something in the text next to it that explains what it, what it is. Like why is that there? To let people know like, “Hey, that was an emoji, by the way. I didn’t type out full moon face. I just used that emoji. Here’s what I meant by it.” So to help people understand a little bit, ’cause they can, they can be helpful for people who at like having the extra visual input, right?

For very visual learners, they can be very helpful. And you know, this is a constant tension that we see in accessibility, where sometimes something that works really well for one group actually creates a barrier for another group. 

And so there’s this constant kind of push and pull over like who. Who are we accommodating and how, what can we do to help one group that doesn’t harm another? And a lot of it is gonna come down to knowing about who your audience is for your particular use case, and then being really thoughtful that even when you do do something that’s going to accommodate one group, that it’s not causing harm or barriers for another group.

Natalie Garza: Yeah, because again, they can be good, but they can also be bad. I think I will also tack on, avoid starting sentences or starting text with emojis, ’cause then it’s really disorienting going like “full moon face. Today’s moon forecast is.” (🌝)

Natalie MacLees: Yeah, yeah. If you use them at all, and I think social media is the place where people tend to get really carried away with them, like put one at the end of your message and call it a day. Like that’s it. 

Don’t put multiple emojis and don’t put them at the beginning. And also that weird thing that people do with the hands clapping emoji between every word. Stop and think for a second about what that sounds like to a screen reader user.

So someone’s gonna hear like, “Don’t. Clapping hands. Use. Clapping hands. Too. Clapping hands. Many. Clapping hands. Emojis. Clapping Hands.” (👏) You’re not emphasizing your message. In that case, you’re making it really hard to understand what it is.

Natalie Garza: No. If anything, that just makes me a little dizzy to hear is like, “Don’t. Clapping hands. Use. Clapping hands.”

Oh my goodness. So yeah, emojis good and bad, but now let’s go even further. How can they be ugly?

The Ugly: Emoticons and ASCII Art

Natalie MacLees: Yeah, well we’re, we’re throwing it back to the, early days of the web here, and ugly is the emoticons and ASCII art that maybe if you’re old like me, you remember when these were really popular and used all over the web. But Natalie tells me that this is having a resurgence with Gen Z.

Natalie Garza: Yes, I see this becoming a resurgence. The Frutiger Aero aesthetic is in full swing right now.

People are trying to bring back vintage little things, and I think ASCII art is one of ’em. And in the early days of texting, which I do remember, we used a lot of emoticons.

Natalie MacLees: Yeah, so I think Natalie, you’ll have to put an example on the screen just to make sure everybody understands what we mean when we say emoticons and ASCII art. But ASCII art is basically just a way to type characters, to make a picture. 

So, you know, you can type parentheses and pipe characters. Usually not letters. It’s usually different kinds of punctuation that you would type to make kitty faces and cows and all kinds of different shapes, over multiple lines of text, usually. 

But of course, like you can imagine. a screen reader isn’t gonna see that and read “cow”, right? It’s gonna read “forward angle bracket, back angle bracket, pipe character, underscore” like it’s not gonna make any sense at all. So if you’re going to make the choice to use those things, you do wanna be really thoughtful about it provide a nice way for people to access that content.

And I think probably the most recommended approach is to take a screenshot and then add alt text to it. So rather than have that be live text on your page, it would just be an image because. Realistically, that is an image, right? Functionally, that’s performing as a graphical element on your page or in your post or whatever you happen to be doing. 

So if you can, take a screenshot and add alt text. If you can’t do that, what you could do is put a description before your ASCII art. So if you have this beautiful ASCII art of a butterfly that goes on for a hundred lines, before that starts, you could put a little description like, “Oh, here’s ASCII art of a butterfly,” and some description of what it is for the people who can’t see it, and then a skip link that’s gonna let people skip past it if they’re using a screen reader or if they’re navigating with their keyboard so that they don’t have to listen to that or interact with it in any way. So that would be another approach that you could use. 

Natalie Garza: In my head, when you said take a screenshot. I almost thought about like an artist paints on his canvas and then makes prints of it, and then sells the prints. The text editor is your canvas, and then you take a print of it, publish it, and share it with everybody.

Natalie MacLees: Yeah. I think also one place that ASCII art gets used a lot is in comments, in code, where it’ll get used to add, like what looks like basically a big header in code. So be thoughtful about that. If you know, probably someday somebody with some kind of disability is gonna have to interact with your code. 

And if they don’t understand what that is, you know, if instead of hearing a word read out, they hear a bunch of characters, a bunch of random parentheses and pipe characters read out, it’s not gonna be, it’s not gonna be very helpful. So be thoughtful about that when you’re putting that into your code as well.

Natalie Garza: Yeah, that is a good point, ’cause trim and borders also technically count as ASCII art. So instead of putting like ” Em dash, em dash, em dash, em dash, em dash, em dash” to make a separator between content, you can just put the HTML element for Line Separator, what is that one called?

Natalie MacLees: Oh, a <br> tag 

Natalie Garza: A <br> tag!

(Post-editing notes: we meant <hr> tag here!)

Natalie MacLees: Yeah.

Accessible Emoji Conclusion

Natalie Garza: So to wrap up, that was the good, the bad, and the ugly when it comes to emojis and accessibility. So where can people go to to see if their site’s accessible?

Natalie MacLees: They can come on over to AAArdvarkAccessibility.com. You can test your homepage for free. Find out what the accessibility issues are and learn how to fix them.

Natalie Garza: Yes. So go check out AAArdvarkAccessibility.com. And with that, we’re gonna wrap up. This is episode 31 of the AAArdvark Accessibility Podcast. Thank you guys for watching. We’ll talk to y’all next time.