E-mail List Archives
Thread: Emoji list bullets
Number of posts in this thread: 6 (In chronological order)
From: DJ Chase
Date: Thu, May 25 2023 6:31AM
Subject: Emoji list bullets
No previous message | Next message →
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/
From: glen walker
Date: Thu, May 25 2023 9:50AM
Subject: Re: Emoji list bullets
← Previous message | Next message →
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 ADDRESS 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/
> > > > >
From: wolfgang.berndorfer@zweiterblick.at
Date: Thu, May 25 2023 3:05PM
Subject: Re: Emoji list bullets
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Thursday, May 25, 2023 5:50 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
> >
From: glen walker
Date: Thu, May 25 2023 3:35PM
Subject: Re: Emoji list bullets
← Previous message | Next message →
I just tried 1F5CE for the document emoji and its name was *not* announced.
As mentioned, whatever emoji is used, test with at least the three main
screen readers, JAWS, NVDA, and VoiceOver. Probably Talkback as well.
As far as using CSS to provide screen reader text, the spec for the
accessible name computation (https://www.w3.org/TR/accname-1.1/#step2) says
that CSS :before and :after are to be included as part of the accessible
name (step F) so it's a valid thing to do.
On Thu, May 25, 2023 at 3:05â¯PM < = EMAIL ADDRESS REMOVED = > wrote:
> 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?
>
>
>
From: DJ Chase
Date: Thu, May 25 2023 4:52PM
Subject: Re: Emoji list bullets
← Previous message | Next message →
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/
From: wolfgang.berndorfer@zweiterblick.at
Date: Fri, May 26 2023 12:36AM
Subject: Re: Emoji list bullets
← Previous message | No next message
Hi Glen,
Yesterday I tested 1F5CE just with JAWS and that works.
Now I tested it with NVDA and surprise: its name was *not* announced, as you noticed!
I have a large collection of icons which work with NVDA, in fact all except those for documents â¹.
It seems to me as a NVDA bug, but we have to acknowledge that yet the document icons can not be used safely.
Thanks for the hint in the accname spec. It is good to know that the usage of these pseudo-elements is defined precisely in a spec.
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Thursday, May 25, 2023 11:36 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Emoji list bullets
I just tried 1F5CE for the document emoji and its name was *not* announced.
As mentioned, whatever emoji is used, test with at least the three main screen readers, JAWS, NVDA, and VoiceOver. Probably Talkback as well.
As far as using CSS to provide screen reader text, the spec for the accessible name computation (https://www.w3.org/TR/accname-1.1/#step2) says that CSS :before and :after are to be included as part of the accessible name (step F) so it's a valid thing to do.
On Thu, May 25, 2023 at 3:05â¯PM < = EMAIL ADDRESS REMOVED = > wrote:
> 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?
>
>
>