WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: when is a list not a list?

for

From: Aditya
Date: Feb 25, 2022 7:22PM

aria-label on a div seems to be why they are not reading it.

If you were to remove aria-label and use “sr-only” spans inside the list item divs, it might work.



Sent from my iPhone

> On Feb 25, 2022, at 7:33 PM, glen walker < <EMAIL REMOVED> > wrote:
>
> Besides the known issue with CSS list-style:none on the Mac.
>
> I have an ARIA list that theoretically looks good but neither JAWS nor NVDA
> recognize it on Firefox or Chrome (and probably other browsers but I didn't
> test).
>
> <div role="list" aria-label="my list label">
> <div class="one" role="listitem" aria-label="one"></div>
> <div class="two" role="listitem" aria-label="two"></div>
> <div class="three" role="listitem" aria-label="three"></div>
> </div>
>
> Ignore the obvious question of why not use a real <ul>. It's not my code.
>
> The nested <div> elements with role="listitem" don't have any text
> content. However, they all have a class that has a background image so
> visibly you see a list of images.
>
> Neither JAWS nor NVDA think there's a list. You can't navigate using the L
> key. If you arrow down through the DOM, nothing gets read. It's skipped
> over. There's no visible text so that's not totally surprising.
>
> However, if I inspect the accessibility properties in Firefox or Chrome
> (via the code inspector), the container has a role of list and the children
> all have a role of listitem. So the AOM seems ok.
>
> I'm not sure this is a new problem but then I've never run across a list
> that was populated with background images. I can replicate it with a real
> list with if I have list-style:none. (In the ARIA list above, since
> they're just <div> elements, there isn't any implied list style.)
>
> <ul style="list-style: none;">
> <li style="background-image:url('some-image.jpg')"></li>
> <li style="background-image:url('some-image.jpg')"></li>
> <li style="background-image:url('some-image.jpg')"></li>
> </ul>
>
> JAWS and NVDA don't recognize that there's a list. Without the
> list-style:none, I visibly see three empty bullet points and both JAWS and
> NVDA recognize it.
>
> So, can I not have a list that is populated with background images when
> there aren't any visible bullets? It doesn't seem to matter if I use real
> <li> elements or role="listitem".
> > > >