Emoji Lists, The Good Way?

I read some accessibility advice recently: don’t make lists where the bullet for each item is an emoji. I think they were saying it is just… annoying. I generally find it annoying visually, so I imagine it’s more so when you have to wait for emojis to be described.

Here’s a screenshot of what I mean:

If I mark that up as an actual <ul> (and remove the default bullets):

<ul class="not-like-this">
  <li>🛞 Cool new wheels!</li>
  <li>🔥 Now 3× faster!</li>
  <li>😍 Tests passing!</li>
</ul>Code language: HTML, XML (xml)

I get this with VoiceOver:

I’m no expert in VoiceOver control, so maybe that can be fine-tuned or something. Still, to my novice ears, it sounds awkward with the next emoji being read so immediately after the end of the previous list item it is hard to tell when one list item ends, and another begins.

But if you love the visual look of an emoji list and want to remove the emojis for assistive tech, CSS is an option now. Almost the same list, but remove the emojis from the HTML:

<ul class="like-this">
  <li>Cool new wheels!</li>
  <li>Now 3× faster!</li>
  <li>Tests passing!</li>
</ul>Code language: HTML, XML (xml)

And put them into the CSS:

.like-this {
  list-style: thumbs;
}

@counter-style thumbs {
  system: cyclic;
  symbols: "🛞" "🔥" "😍";
  suffix: " ";
}Code language: CSS (css)

Now you’ll get a “normal” list in VoiceOver:

I realize that custom CSS control is absent in common places where these lists appear: social media, GitHub, etc. And I realize needing to produce custom CSS just for one list is a big ask. But hey, if you’ve got the control, and the shoe fits, maybe use it for good.