WebAIM - Web Accessibility In Mind

E-mail List Archives

when is a list not a list?

for

From: glen walker
Date: Feb 25, 2022 6:33PM

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