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: Vsevolod Popov
Date: Aug 4, 2021 7:19AM

Thank you!
So the point that it was a css thing was correct
And I have another question.
How do you find these CSS properties?
Usually when I explore the code I press ctrl+u or i press shift + f10 on
a focusable element and choose inspect, but I find HTML there only. How
do I find CSS properties to be able to view them?
Thank you!

04.08.2021 16:03, Patrick H. Lauke пишет:
> 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).

--
Best regards,
Vsevolod
https://t.me/vsevapopov2
https://github.com/sevapopov2