WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Emoji list bullets

for

From: wolfgang.berndorfer@zweiterblick.at
Date: May 26, 2023 12:36AM

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 REMOVED> > On Behalf Of glen walker
Sent: Thursday, May 25, 2023 11:36 PM
To: WebAIM Discussion List < <EMAIL 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 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?
>
>
>