E-mail List Archives
Thread: NVDA reads all elements in the list when focusing with the tab key
Number of posts in this thread: 13 (In chronological order)
From: Vsevolod Popov
Date: Wed, Aug 04 2021 5:46AM
Subject: NVDA reads all elements in the list when focusing with the tab key
No previous message | Next message →
Hello,
I have a question regarding focusable elements and navigating with the
tab key issue.
Recently I found 2 websites with the next issue:
When navigating to the top menu with the Tab key, NVDA starts reading
every element in the list starting from the top menu element. The list
is combined in the more lists, and it stopps reading on the last link.
If I press tab again, I can sometimes hear sylence.
I thought this issue could appear because of the tabindex is set to 0 on
all of the <li> elements on a website, but then I encountered the other
website with exactly the same issue and there are no any tab indexes but
the issue exists, when tabbing it starts telling all elements in the top
menu after only 1 press of the tab key instead of just announcing the
first element in the top menu.
Why could it appear and how can it be fixed?
Can it be an issue with CSS?
Or maybe that's just my falt of not knowing something that works in NVDA?
I also ask that because I don't find this thing on an applevis which I
use as the reference.
Thank you!
--
Best regards,
Vsevolod
https://t.me/vsevapopov2
https://github.com/sevapopov2
From: Patrick H. Lauke
Date: Wed, Aug 04 2021 6:09AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
On 04/08/2021 12:46, Vsevolod Popov wrote:
> I have a question regarding focusable elements and navigating with the
> tab key issue.
> Recently I found 2 websites with the next issue:
It would obviously be easier for people to try to help/work out what's
going on if you pointed out what those 2 websites are...
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
From: Vsevolod Popov
Date: Wed, Aug 04 2021 6:11AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
https://fondnfr.ru
https://alenka.ru
04.08.2021 15:09, Patrick H. Lauke пиÑеÑ:
> It would obviously be easier for people to try to help/work out what's
> going on if you pointed out what those 2 websites are...
>
> P
--
Best regards,
Vsevolod
https://t.me/vsevapopov2
https://github.com/sevapopov2
From: Patrick H. Lauke
Date: Wed, Aug 04 2021 6:20AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
On 04/08/2021 13:11, Vsevolod Popov wrote:
> https://fondnfr.ru
> https://alenka.ru
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.
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
From: Vsevolod Popov
Date: Wed, Aug 04 2021 6:24AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
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.
--
Best regards,
Vsevolod
https://t.me/vsevapopov2
https://github.com/sevapopov2
From: Patrick H. Lauke
Date: Wed, Aug 04 2021 7:03AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
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
From: Vsevolod Popov
Date: Wed, Aug 04 2021 7:19AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
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
From: Patrick H. Lauke
Date: Wed, Aug 04 2021 10:34AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
On 04/08/2021 14:19, Vsevolod Popov wrote:
> 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?
Use the browser's developer tools (F12, or the 'inspect' context menu
option you mentioned). In the page inspector, you see the DOM, but also
have a panel with all the styles currently applied to whatever element
has focus/is highlighted in the DOM view
https://developer.mozilla.org/en-US/docs/Tools
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
From: Lucy GRECO
Date: Wed, Aug 04 2021 11:36AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
hi
are you sure you have screen layout off try hitting nvda v and see if
that fixes it
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces
On Wed, Aug 4, 2021 at 9:34 AM Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:
> On 04/08/2021 14:19, Vsevolod Popov wrote:
> > 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?
>
> Use the browser's developer tools (F12, or the 'inspect' context menu
> option you mentioned). In the page inspector, you see the DOM, but also
> have a panel with all the styles currently applied to whatever element
> has focus/is highlighted in the DOM view
>
> https://developer.mozilla.org/en-US/docs/Tools
>
> 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
> > > > >
From: Vsevolod Popov
Date: Wed, Aug 04 2021 12:01PM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
Hello,
It was turned on, but after turning off it didn't fix the issue in firefox.
But is it better to turn screen layout off while testing? If so, why?
Thank you!
04.08.2021 20:36, Lucy GRECO пиÑеÑ:
>  are you sure you have screen layout off try hitting nvda v and see
> if that fixes it
--
Best regards,
Vsevolod
https://t.me/vsevapopov2
https://github.com/sevapopov2
From: Vsevolod Popov
Date: Fri, Aug 06 2021 3:14AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
Hello,
I am really confused about exploring CSS.
I try to find this top navigation css overflow issue you were pointing
on so I could understand the issue better and report it.
But I am confused where I should look these CSS styles.
I do the following:
1. Tab untill the link where NVDA starts reading the whole menu from the
first link in Firefox:
<a class="first level1 active" href="/">ÐлавнаÑ</a>
Press shift+F10 and choose inspect.
When the DOM opens, I tab untill NVDA says clickable inline.
There are checkboxes that indicate that the css style is enabled or not.
I also tryed to press shift+f7 and there the whole CSS page was opened
with all styles and numbered lines.
I noticed that when pressing shift+f7 it loads only the part of the styles.
But I cannot find the issue you were pointing on.
Which way is correct?
Maybe I do it completely wrong?
I am really confused and would like to figure it out.
Thank you in advance!
04.08.2021 19:34, Patrick H. Lauke пиÑеÑ:
> Use the browser's developer tools (F12, or the 'inspect' context menu
> option you mentioned). In the page inspector, you see the DOM, but
> also have a panel with all the styles currently applied to whatever
> element has focus/is highlighted in the DOM view
--
Best regards,
Vsevolod
https://t.me/vsevapopov2
https://github.com/sevapopov2
From: Patrick H. Lauke
Date: Fri, Aug 06 2021 3:23AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | Next message →
I'll admit that I don't navigate developer tools with NVDA or keyboard
myself (only use NVDA for testing of the content itself), so I have the
advantage of just flitting around in devtools with the mouse and
speedily exploring stuff (by selecting/highlighting various elements
quickly in the DOM view and glancing over at the styles panel until I
find things that I suspect are problematic).
In this particular case, the overflow-y:auto is defined on the
<ul class="sidenav" id="mobile-menu">
So, depending on which element you "land" on in the developer tools' DOM
view (when you do the Inspect from the context menu), you sometimes need
to navigate up in the DOM hierarchy until you find the element that has
the offending CSS.
Hope that makes sense,
Patrick
--
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
From: Geetha Shamanna
Date: Fri, Aug 06 2021 4:42AM
Subject: Re: NVDA reads all elements in the list when focusing with the tab key
← Previous message | No next message
Hello,
You may find the following tutorial useful:
Navigate Chrome DevTools with assistive technology
https://developer.chrome.com/docs/devtools/accessibility/navigation/
Geetha
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Vsevolod Popov
Sent: Friday, August 6, 2021 10:14 AM
To: Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >; WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] NVDA reads all elements in the list when focusing with the tab key
Hello,
I am really confused about exploring CSS.
I try to find this top navigation css overflow issue you were pointing on so I could understand the issue better and report it.
But I am confused where I should look these CSS styles.
I do the following:
1. Tab untill the link where NVDA starts reading the whole menu from the first link in Firefox:
<a class="first level1 active" href="/">ÐлавнаÑ</a> Press shift+F10 and choose inspect.
When the DOM opens, I tab untill NVDA says clickable inline.
There are checkboxes that indicate that the css style is enabled or not.
I also tryed to press shift+f7 and there the whole CSS page was opened with all styles and numbered lines.
I noticed that when pressing shift+f7 it loads only the part of the styles.
But I cannot find the issue you were pointing on.
Which way is correct?
Maybe I do it completely wrong?
I am really confused and would like to figure it out.
Thank you in advance!
04.08.2021 19:34, Patrick H. Lauke пиÑеÑ:
> Use the browser's developer tools (F12, or the 'inspect' context menu
> option you mentioned). In the page inspector, you see the DOM, but
> also have a panel with all the styles currently applied to whatever
> element has focus/is highlighted in the DOM view
--
Best regards,
Vsevolod
https://t.me/vsevapopov2
https://github.com/sevapopov2