WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Emoji list bullets

for

From: wolfgang.berndorfer@zweiterblick.at
Date: May 25, 2023 3:05PM

I agree with Glen that a Unicode symbol would be a clever idea to use:
1. You save a lot of work around to provide a text alternative for an image or a font awesome icon etc. JAWS and NVDA interpret Unicode symbols quite reliable. Just the texting does not always fit perfectly.
2. A screen reader provides the interpretation of a Unicode symbol in the default language. Helpful for pages in a foreign language beyond any SC.

I’d propose 🗎 (1F5CE) to indicate documents. They are not clipboards, although the icon looks alike.

And I am not sure whether CSS is the correct approach. Once I learned that CSS should not be used to provide information for SR:
.folder:before { content: '1f4c1'; }
<li style="list-style-type: '1f4c1'";'">
What is State of the Art?


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Thursday, May 25, 2023 5:50 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Emoji list bullets

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/
> > > archives at http://webaim.org/discussion/archives
> >