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:

Screenshot of emoji list, which is essentially like this:

🛞 Cool new wheels!
🔥 Now 3× faster!
😍 Tests passing!

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.


CodePen

I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

3 responses to “Emoji Lists, The Good Way?”

  1. Andy Blum says:

    The main problem you’ll run into here is that the emojis have to be defined separately from the markup. A better solution might be to use the ::marker pseudo-element and a data-attribute.

    https://codepen.io/andy-blum/pen/bGmNVXw

  2. Curtis Wilcox says:

    @counter-style doesn’t work in Safari, the browser best paired with VoiceOver, even if you enable the “CSS @counter-style” flag. It does work in Safari Technology Preview with the flag enabled, maybe it’ll be in mainline Safari this year.

    Unfortunately, the content property is also not supported with ::marker in Safari. However, you can do something similar by using an inline style to set the emoji in a custom property then use that for the list-style-type. You could skip a step and set the list-style-type itself inline but, ick.

    https://codepen.io/ccwilcox/pen/XWxJVYO

    At least for simpler examples like this, I could imagine a build process automatically generating :nth-of-type fallbacks for @counter-style, contained within an @supports not selector(@counter-style thumbs).

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️