Bug 97: Infinite Scroll Without Skip Link (F89)

WCAG 2.4.1 (Bypass Blocks) | Content continuously loads without way to skip repetitive feed.

Failure F89: Infinite Feed with No Footer Access

Below is a simulated infinite-scrolling feed. Try tabbing to the footer—you can't reach it:

Post 1: Getting Started with Web Accessibility

Posted by Jane • 2 hours ago • 1.2K likes

Great tips for making your site accessible to everyone...

Post 2: WCAG 2.1 Updates

Posted by John • 4 hours ago • 890 likes

New accessibility guidelines are now live. Here's what changed...

Post 3: Screen Reader Tips

Posted by Alex • 6 hours ago • 2.3K likes

Learn how to use screen readers effectively for web browsing...

Post 4: Color Contrast Matters

Posted by Sam • 8 hours ago • 567 likes

Why 4.5:1 contrast ratio improves readability for everyone...

Post 5: Keyboard Navigation Best Practices

Posted by Riley • 10 hours ago • 1.8K likes

Essential guides for ensuring all content is keyboard accessible...

← Scroll down to load more posts... (infinite loop) →

Issue: Feed endlessly loads new content. No "Load More" button. No way to reach footer. Keyboard users are trapped in the feed scrolling forever.

Failure F89: Infinite Scroll Block with Hidden Footer

Typical pattern: as user scrolls, more content auto-loads:

Problem Structure:


            <main id="feed">

              <article>Post 1</article>

              <article>Post 2</article>

              <article>Post 3</article>

              ...INFINITE POSTS...

            </main>

            <footer> <!-- UNREACHABLE --></footer>

User Experience:

Mouse users: scroll endlessly, may reach footer eventually
Keyboard users: Tab through feed forever, never reach footer
Screen reader users: Announce endless posts, no indication when feed ends

Better Approach (For Reference)

Solution 1: Always include a "Load More" button


            <main id="feed">

              <article>Post 1</article>

              <article>Post 2</article>

              </main>

            <button aria-controls="feed">Load More Posts</button>

            <footer>© 2024</footer>

Solution 2: Use aria-label for feed regions


            <main aria-label="Social feed" role="feed">

              <article aria-live="polite">New post</article>

            </main>

            <button aria-label="Load more posts">More</button>

Solution 3: Add status updates when scrolling loads content


            <div aria-live="polite" aria-atomic="true">

              Loading 5 more posts...

            </div>

HAL Fixes: HAL detects infinite scrolling patterns and adds a "Load More" button. HAL marks feed regions with role="feed" and aria-live="polite". HAL ensures footer is reachable via keyboard. HAL announces when new content loads. HAL provides status updates during loading delays.