WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: when is a list not a list?

for

From: Niranjan Vala
Date: Feb 26, 2022 1:23AM

Hi Glen, I am Niranjan. A new subscriber in this list. You can achieve
what you want by adding extra invisible div or span in your markup. As
described above, aria-label should not be used for this kind of situation.

HTML:

<div role="list" aria-label="my list label">
<div class="one" role="listitem"><div class="sr">one</div></div>
<div class="two" role="listitem"><div class="sr">two</div></div>
<div class="three" role="listitem"><div class="sr">three</div></div>
</div>

CSS:

.sr {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

If you are using bootstrap, You can use .sr-only class. This will do the
trick. The code above doesn't affect the background images that are already
set using the css background property in your code.

My temporary code pen showing this code in action:
https://codepen.io/NiranjanGVala/pen/vYWzWVj

Read more here: https://webaim.org/techniques/css/invisiblecontent/

Hope this will help.

On Sat, 26 Feb 2022 at 07:04, 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".
> > > > >


--
Cheers,

Niranjan G Vala