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.