WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: query on the lazy loading

for

Number of posts in this thread: 9 (In chronological order)

From: suman damera
Date: Tue, Aug 24 2021 4:36AM
Subject: query on the lazy loading
No previous message | Next message →

hi all,
We have a website where all the web pages in the website are working with
lazy loading. To give you the context, what is lazy loading?Lazy loading is
nothing but the widgets/elements on the web page will be loaded for the
first view port and the elements behind the view port will load after the
user scrolls. To put it simpler, a web page contains 5 pages. By default,
first page is loaded. When the user scrolls then second page loads and so
on.. when the first page is loaded, rest of the elements in the 4 pages
would not be present in the DOM i guess. i hope it is clear. here are some
accessibility challenges that we are facing
1.after navigating the last element in the page 1(current view port) during
tab navigation, the focus is lost. We handled this situation like as soon
as the user press tab/arrow keys/space/enter key, the lazy loading gets
disabled, and the focus moves smoothly. This works fine and there is no
problem in the tab navigation
2.when the screen reader is on, while accessing the web page with the arrow
keys from the top to bottom, some of the widgets get skipped. this is the
issue still we are not able to fix.
3.when screen reader is on, all the headings and buttons won't show-up
while user is pressing shortcut keys such as h for heading, b for the
buttons because of the lazy loading, this is also the problem still we are
not able to fix
regarding points 2 and 3, here are the some of our thoughts why it is not
working properly
1.a. first thing, screen readers work in the virtual buffer and when user
navigates with the arrow keys, we are unable to disable the lazy loading
unless interaction takes place although we disabled the lazy loading with
the tab/arrow keys/press/enter
it seems the problem is with NVDA and FF only
how to fix point 2 and point 3 issue, any thoughts?

From: Jonathan C. Cohn
Date: Tue, Aug 24 2021 5:40AM
Subject: Re: query on the lazy loading
← Previous message | Next message →

I would expect that if the tracking features of JAWS are turned off that you would see issues with that screen reader also. facebook uses some lazy loading like features too and it can get very slugish 'and confusing for a blind user. They enabled a keyboard interaction that when it works helps manage the loading I expect. They also provide a mobile lite alternatibbve 'that uses minimal JS. Most screen reader friends I have use FB with the mobile app or in 'this mimamalistic version.

Sent from my iPhone

> On Aug 24, 2021, at 6:36 AM, suman damera < = EMAIL ADDRESS REMOVED = > wrote:
>
> hi all,
> We have a website where all the web pages in the website are working with
> lazy loading. To give you the context, what is lazy loading?Lazy loading is
> nothing but the widgets/elements on the web page will be loaded for the
> first view port and the elements behind the view port will load after the
> user scrolls. To put it simpler, a web page contains 5 pages. By default,
> first page is loaded. When the user scrolls then second page loads and so
> on.. when the first page is loaded, rest of the elements in the 4 pages
> would not be present in the DOM i guess. i hope it is clear. here are some
> accessibility challenges that we are facing
> 1.after navigating the last element in the page 1(current view port) during
> tab navigation, the focus is lost. We handled this situation like as soon
> as the user press tab/arrow keys/space/enter key, the lazy loading gets
> disabled, and the focus moves smoothly. This works fine and there is no
> problem in the tab navigation
> 2.when the screen reader is on, while accessing the web page with the arrow
> keys from the top to bottom, some of the widgets get skipped. this is the
> issue still we are not able to fix.
> 3.when screen reader is on, all the headings and buttons won't show-up
> while user is pressing shortcut keys such as h for heading, b for the
> buttons because of the lazy loading, this is also the problem still we are
> not able to fix
> regarding points 2 and 3, here are the some of our thoughts why it is not
> working properly
> 1.a. first thing, screen readers work in the virtual buffer and when user
> navigates with the arrow keys, we are unable to disable the lazy loading
> unless interaction takes place although we disabled the lazy loading with
> the tab/arrow keys/press/enter
> it seems the problem is with NVDA and FF only
> how to fix point 2 and point 3 issue, any thoughts?
> > > >

From: glen walker
Date: Tue, Aug 24 2021 7:41AM
Subject: Re: query on the lazy loading
← Previous message | Next message →

One option is to have visually hidden text that explains, upon the first
page load, that the user must go to the end of the page (Ctrl+End or
Cmd+DownArrow) to fully load the page before they navigate via screen
reader shortcut keys.

Another option is to let the user choose if they want lazy loading. You'd
probably need visually hidden text in this case too, explaining where the
"settings" dialog is so they can change the loading option.

Or a combination of the two. A message that says the page isn't fully
loaded until they scroll to the bottom and if they want to permanently turn
off that feature, go to the settings dialog.

From: suman damera
Date: Wed, Aug 25 2021 4:42AM
Subject: Re: query on the lazy loading
← Previous message | Next message →

Thank you Glen for your input.
providing visually hidden text helps the user to navigate all the elements
with the help of screen reader keyboard shortcut keys and kind of this
problem is resolved. How about point 2 issue in the main thread?


On Tue, Aug 24, 2021 at 7:12 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> One option is to have visually hidden text that explains, upon the first
> page load, that the user must go to the end of the page (Ctrl+End or
> Cmd+DownArrow) to fully load the page before they navigate via screen
> reader shortcut keys.
>
> Another option is to let the user choose if they want lazy loading. You'd
> probably need visually hidden text in this case too, explaining where the
> "settings" dialog is so they can change the loading option.
>
> Or a combination of the two. A message that says the page isn't fully
> loaded until they scroll to the bottom and if they want to permanently turn
> off that feature, go to the settings dialog.
> > > > >

From: Birkir R. Gunnarsson
Date: Wed, Aug 25 2021 5:31AM
Subject: Re: query on the lazy loading
← Previous message | Next message →

Ideally, offer next/previous buttons to keep loading content, creates
consistency, predictability and works with the keyboard.
Screen reader only instructions differ between screen readers (how
they handle their virtual buffer navigation methods and scrolling) so
you may have to end up providing 2 or 3 sets of instructions depending
what screen readers people are using.
Maybe you can just present the intire page and visually hide the
portions of the page that scroll into view, though it could make for a
very large page.
Sadly, lazy loading just isn't a very good/usalbe/predictable
experience, but sometimes we have to go along and make the best of it.

On 8/25/21, suman damera < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you Glen for your input.
> providing visually hidden text helps the user to navigate all the elements
> with the help of screen reader keyboard shortcut keys and kind of this
> problem is resolved. How about point 2 issue in the main thread?
>
>
> On Tue, Aug 24, 2021 at 7:12 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
>> One option is to have visually hidden text that explains, upon the first
>> page load, that the user must go to the end of the page (Ctrl+End or
>> Cmd+DownArrow) to fully load the page before they navigate via screen
>> reader shortcut keys.
>>
>> Another option is to let the user choose if they want lazy loading. You'd
>> probably need visually hidden text in this case too, explaining where the
>> "settings" dialog is so they can change the loading option.
>>
>> Or a combination of the two. A message that says the page isn't fully
>> loaded until they scroll to the bottom and if they want to permanently
>> turn
>> off that feature, go to the settings dialog.
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Wed, Aug 25 2021 1:27PM
Subject: Re: query on the lazy loading
← Previous message | Next message →

By issue 2 do you mean some elements are skipped when you arrow down with
the screen reader? If you're talking about elements that are *not* part of
the lazy loading section in that they exist on the page, then the main
cause of elements being skipped is because aria-hidden is set to true. It
might be set on the element itself (which is easy to spot) or it might be
set on a parent element or higher ancestor element and that takes a little
more work to find. It's hard to say for sure without seeing the page
you're talking about.

On Wed, Aug 25, 2021 at 4:42 AM suman damera < = EMAIL ADDRESS REMOVED = > wrote:

> Thank you Glen for your input.
> providing visually hidden text helps the user to navigate all the elements
> with the help of screen reader keyboard shortcut keys and kind of this
> problem is resolved. How about point 2 issue in the main thread?
>
>
>

From: suman damera
Date: Wed, Aug 25 2021 9:09PM
Subject: Re: query on the lazy loading
← Previous message | Next message →

Hi Glen,
yes, I am talking about skipping the widgets on point 2 from the main
thread. aria-hidden is not set to true and it is proper. even then, the few
widgets are getting skipped during down arrow navigation. Once we navigate
through the entire page with down arrow and then use the up arrow, the
skipped widget is discoverable. this is the because of lazy loading only
and i need to understand how to overcome this issue

Thank you.

On Thu, Aug 26, 2021 at 12:58 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> By issue 2 do you mean some elements are skipped when you arrow down with
> the screen reader? If you're talking about elements that are *not* part of
> the lazy loading section in that they exist on the page, then the main
> cause of elements being skipped is because aria-hidden is set to true. It
> might be set on the element itself (which is easy to spot) or it might be
> set on a parent element or higher ancestor element and that takes a little
> more work to find. It's hard to say for sure without seeing the page
> you're talking about.
>
> On Wed, Aug 25, 2021 at 4:42 AM suman damera < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Thank you Glen for your input.
> > providing visually hidden text helps the user to navigate all the
> elements
> > with the help of screen reader keyboard shortcut keys and kind of this
> > problem is resolved. How about point 2 issue in the main thread?
> >
> >
> >
> > > > >

From: Jonathan Cohn
Date: Sat, Aug 28 2021 3:49PM
Subject: Re: query on the lazy loading
← Previous message | Next message →

Hello, it can all depend on the Symantic and non semantic nature of the elements in question for your widget and also the screen reader. I am assuming by widget that you are talking about 2 or more HTML elements that the screen reader and user would consider ass one functional unit. Generally, the ARIA Naming algorithm should be used for this type of element, but sometimes it doesn't work correctly.
Can you give an example page or pseudo markup with examples of what is being lost by the screen reader?

Best wishes,

Jonathan Cohn



> On Aug 25, 2021, at 23:09, suman damera < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi Glen,
> yes, I am talking about skipping the widgets on point 2 from the main
> thread. aria-hidden is not set to true and it is proper. even then, the few
> widgets are getting skipped during down arrow navigation. Once we navigate
> through the entire page with down arrow and then use the up arrow, the
> skipped widget is discoverable. this is the because of lazy loading only
> and i need to understand how to overcome this issue
>
> Thank you.
>
> On Thu, Aug 26, 2021 at 12:58 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
>> By issue 2 do you mean some elements are skipped when you arrow down with
>> the screen reader? If you're talking about elements that are *not* part of
>> the lazy loading section in that they exist on the page, then the main
>> cause of elements being skipped is because aria-hidden is set to true. It
>> might be set on the element itself (which is easy to spot) or it might be
>> set on a parent element or higher ancestor element and that takes a little
>> more work to find. It's hard to say for sure without seeing the page
>> you're talking about.
>>
>> On Wed, Aug 25, 2021 at 4:42 AM suman damera < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> Thank you Glen for your input.
>>> providing visually hidden text helps the user to navigate all the
>> elements
>>> with the help of screen reader keyboard shortcut keys and kind of this
>>> problem is resolved. How about point 2 issue in the main thread?
>>>
>>>
>>>
>> >> >> >> >>
> > > >

From: suman damera
Date: Thu, Sep 02 2021 12:27AM
Subject: Re: query on the lazy loading
← Previous message | No next message

Hi jonathon,

sorry for the late reply.
regarding pseudo markup with examples i will get back to you.

On Sun, Aug 29, 2021 at 3:20 AM Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:

> Hello, it can all depend on the Symantic and non semantic nature of the
> elements in question for your widget and also the screen reader. I am
> assuming by widget that you are talking about 2 or more HTML elements that
> the screen reader and user would consider ass one functional unit.
> Generally, the ARIA Naming algorithm should be used for this type of
> element, but sometimes it doesn't work correctly.
> Can you give an example page or pseudo markup with examples of what is
> being lost by the screen reader?
>
> Best wishes,
>
> Jonathan Cohn
>
>
>
> > On Aug 25, 2021, at 23:09, suman damera < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > Hi Glen,
> > yes, I am talking about skipping the widgets on point 2 from the main
> > thread. aria-hidden is not set to true and it is proper. even then, the
> few
> > widgets are getting skipped during down arrow navigation. Once we
> navigate
> > through the entire page with down arrow and then use the up arrow, the
> > skipped widget is discoverable. this is the because of lazy loading only
> > and i need to understand how to overcome this issue
> >
> > Thank you.
> >
> > On Thu, Aug 26, 2021 at 12:58 AM glen walker < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> >> By issue 2 do you mean some elements are skipped when you arrow down
> with
> >> the screen reader? If you're talking about elements that are *not*
> part of
> >> the lazy loading section in that they exist on the page, then the main
> >> cause of elements being skipped is because aria-hidden is set to true.
> It
> >> might be set on the element itself (which is easy to spot) or it might
> be
> >> set on a parent element or higher ancestor element and that takes a
> little
> >> more work to find. It's hard to say for sure without seeing the page
> >> you're talking about.
> >>
> >> On Wed, Aug 25, 2021 at 4:42 AM suman damera < = EMAIL ADDRESS REMOVED = >
> wrote:
> >>
> >>> Thank you Glen for your input.
> >>> providing visually hidden text helps the user to navigate all the
> >> elements
> >>> with the help of screen reader keyboard shortcut keys and kind of this
> >>> problem is resolved. How about point 2 issue in the main thread?
> >>>
> >>>
> >>>
> >> > >> > >> > >> > >>
> > > > > > > > >
> > > > >