WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Emoji list bullets

for

From: glen walker
Date: May 25, 2023 9:50AM

Multilevel lists, in general, are fine assuming you have properly nested
<ul>/<li> elements. Most screen readers will tell the user which "level"
they're on in the list/sublist.

Using an image or emoji for the bullet point is also ok.

However, it sounds like the emoji also has meaning. With a folder/document
list, it's possible to have both folders and documents at the same level.
A sighted user would be able to see two different emojis so that same
information needs to be communicated to assistive technology. Depending on
how you implement it, you might get the emoji name announced.

If you use CSS :before, then the emoji name is announced. I tried it with
VoiceOver on iOS, NVDA on firefox, and JAWS on chrome.

<style>
.folder:before { content: '1f4c1'; }
.doc:before { content: '1f4cb'; }
</style>

<ul style="list-style-type:none">
<li class="folder">alpha</li>
<li class="folder">beta</li>
<li class="doc">gamma</li>
<li class="doc">delta</li>
</ul>

NVDA and JAWS would say "file folder" and "clipboard".
VO would say "closed file folder" and "clipboard"

(You can play around with different emoji's to hear the name you want
announced. "clipboard" was just a quick test because it sort of looked like
a document.)

Note that I turned off the list style since the emoji is acting as the
bullet point but isn't a real bullet point. If you don't turn off the list
style, you see both the bullet point and the emoji.

When turning off the list style, VoiceOver usually removes the list
semantics and you have to add it back in by specifically adding role="list"
to the <ul>. However, when using the :before CSS attribute, VO still treats
it as a list. I'm not sure if that's new behavior by VO. I used to always
have to specify a list role when I turned off the list style.

You could potentially implement your bullets using CSS list-style-image, in
which case you don't have to turn off the list style, but then you need a
way to communicate the type of bullet it is (folder or document), perhaps
with sr-only text.

There are probably a dozen other ways to do this. Just test it thoroughly
with different screen readers and browsers.



On Thu, May 25, 2023 at 6:31 AM DJ Chase < <EMAIL REMOVED> > wrote:

> Hi All,
>
> I have a small site which is logically structured and uses breadcrumbs
> as the primary navigation, and I'm looking to create an index page to
> fulfill SC 2.4.5 Multiple Ways [1]. I’d like it to reflect the structure
> of the site, however, so I'm considering using a multi-level bulleted
> list where directories have a folder emoji as their bullet and documents
> have a document emoji as their bullet.
>
> Are y’all aware of any potential accessibility problems with that? I'm
> aware that nested lists can be complicated with a screen reader, but I'm
> also comfortable assuming that my audience can do that because it is a
> technical blog. My main concern is with the emojis; I’ve looked online,
> but I can't really find anything about this use case.
>
> [1]: https://www.w3.org/TR/WCAG21/#multiple-ways
>
> Cheers,
> --
> DJ Chase
> They, Them, Theirs
> {gemini,https}://dj-chase.com/
> > > > >