2

I am using Intersection Observer on a client's site to lazily load expensive parts of pages until a user scrolls them partially into view.

For example, the HTML may look something like the following:

<html>

<body>
    <header>
        <h1>Page Title</h1>
    </header>
    <section aria-labelledby="section-1-title">
        <h2 id="section-1-title">Section One Title</h2>
        <p>Lorem ipsum, dolor sit amet...</p>
    </section>
    <section aria-labelledby="section-2-title">
        <h2 id="section-2-title">Section Two Title</h2>
        <p>Lorem ipsum, dolor sit amet...</p>
    </section>
    <section data-lazyload="true" aria-labelledby="section-3-title"> <!-- Clearly poor aria use here. Could use aria-label, but is that best? -->
        <!-- This content would be programmatically rendered once scrolled into view -->
    </section>
</body>

</html>

My questions are:

  • What accessibility concerns should I be thinking about and preparing for?

  • How does this lazy loading method affect the document's accessibility tree?

  • Does the document's accessibility tree refresh after new content is loaded in?

  • What can I do to better equip assistive technology users to navigate the page's content?

  • Is there a best practice or a larger body of information that I should be studying?

Lucas Mace
  • 43
  • 6

1 Answers1

1

load expensive parts of pages until a user scrolls them partially into view.

What accessibility concerns should I be thinking about and preparing for?

A screen reader user doesn't typically have to scroll the page to read more content. They can walk the entire DOM (really the accessibility tree, but similar to the DOM) and hear the entire page. If you don't load content until they scroll, that could be very confusing unless they're notified about that behavior. That is, a screen reader user could navigate by all the headings on the page to get an idea of the page structure, but if some headings are not loaded until they're scrolled into view, the user won't get a complete picture of the page.

How does this lazy loading method affect the document's accessibility tree?

Does the document's accessibility tree refresh after new content is loaded in?

If the DOM changes, the accessibility tree will update. So adding new elements to the page will update the a11y tree. If you set CSS display:none on an element, it will update the a11y tree. If you change the value of an ARIA attribute, such as aria-checked, it will update the a11y tree.

What can I do to better equip assistive technology users to navigate the page's content?

As mentioned above, if there is lazy loading, make sure the user knows about it.

slugolicious
  • 15,824
  • 2
  • 29
  • 43