WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: NVDA reads all elements in the list when focusing with the tab key

for

From: Patrick H. Lauke
Date: Aug 4, 2021 7:03AM

On 04/08/2021 13:24, Vsevolod Popov wrote:
> I have just checked it with chrome and I also didn't encounter this issue.
> However, I noticed that it appears in firefox on boath pages.
> That's really interesting.
>
> 04.08.2021 15:20, Patrick H. Lauke пишет:
>> For what it's worth, I'm not experiencing the problem you described
>> (using Chrome/NVDA). The screen reader tells me there are lists, but
>> tabbing through the pages it doesn't start reading out the entirety of
>> lists - only one item that is focused at a time.
>

Aha, at least for that first site, the issue is: what you're hitting on
is the "mobile" side navigation, which has been styled out of the page
(rather than being set to display:none). And that mobile side navigation
has overflow-y:auto set

.sidenav {
...
overflow-y: auto;
...
}

To make sure that containers with overflow set to auto whose content is
larger than their layout dimensions, and thus show scroll bars normally,
can still be scrolled with the keyboard, Firefox makes those containers
focusable (other browsers don't). This is why when navigating with NVDA
in Firefox, you then land on this (visually hidden) mobile navigation
container, which is set to have automatic overflow but whose styles mean
that its dimensions are much smaller than its content... and once that
receives focus, NVDA announces all its content.

Long story short, to fix this sort of thing: that sidebar should be
display:none so it's completely removed (not just visually hidden
off-screen). In the longer run, being aware that Firefox does this sort
of automatic "containers with overflow auto are made focusable by
default" behaviour).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke