Accessible Infinite Scroll & Virtualized Lists: DOM Management & Footer Reachability

Infinite scroll dynamically loads content as users scroll down the page, popular on social feeds and e-commerce product listings. However, unconstrained infinite scrolling presents catastrophic accessibility barriers: it prevents keyboard users from ever reaching site footer links, causes disorientation for screen readers, and destroys browser back-button history.

The Core Accessibility Traps of Infinite Scroll

• Unreachable Footer Content (WCAG 2.1.1): Important legal links, contact pages, and accessibility statements in the footer are permanently pushed out of reach as new content loads continuously.
• Lost Reading Position: Navigating away and returning resets scroll depth, forcing keyboard users to tab through hundreds of items repeatedly.
• DOM Memory Bloat: Appending thousands of nodes degrades assistive technology responsiveness.

Solving the Footer Reachability Barrier

If infinite scroll is used, all links contained in the footer must be duplicated elsewhere in the main navigation or header drawer, guaranteeing complete operability without requiring users to scroll to the bottom.

The 'Load More' Button as the Gold Standard

The most accessible design pattern replaces automatic infinite scroll with an explicit "Load More Products" button. This preserves user autonomy, keeps footer content accessible, and creates a predictable keyboard interaction point.

<div class="product-grid" id="products-list">
  <!-- Product Cards -->
</div>

<div class="load-more-wrapper">
  <button type="button" id="load-more-btn" aria-controls="products-list">
    Load 12 More Products (Showing 24 of 96)
  </button>
</div>

<div id="load-status" class="sr-only" role="status" aria-live="polite"></div>

DOM Virtualization Gotchas (React-Window, TanStack Virtual)

When using virtualized list renderers that unmount off-screen DOM nodes:

1. Ensure screen reader search tools (e.g. VoiceOver rotor) can still index total item counts using `aria-rowcount` and `aria-rowindex`.
2. Maintain scroll position restoration when users navigate back to the list from a detail view.

Announcing Batch Loading via ARIA Live Regions

When a new batch of 12 items loads, move focus to the first newly loaded product card and announce:

"12 new products loaded. Showing items 25 through 36 of 96."