WebAIM - Web Accessibility In Mind

E-mail List Archives

query on the lazy loading

for

From: suman damera
Date: Aug 24, 2021 4:36AM

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?