WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Emoji list bullets

for

From: DJ Chase
Date: May 25, 2023 4:52PM

Thank you all for your thoughtful responses.

On Thu May 25, 2023 at 11:50 AM EDT, glen walker wrote:
> 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.

Yeah, I was hoping the › at the end of directory names in combined with
the presence of a sublist would be enough.

> Depending on
> how you implement it, you might get the emoji name announced.

That’s good to know. I wouldn’t have considered that but it makes
complete sense.

> 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.
>

I tried it with `list-style-type: '1f4c1';` and Orca just read it as
“bullet”.

> 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.

That’s good to know. I can’t test with VoiceOver so thank you.

Cheers,
--
DJ Chase
They, Them, Theirs
{gemini,https}://dj-chase.com/