• Success Criterion 2.1.1
  • Conformance level A

Infinite Scroll That Loads New Content Only on Mouse Scroll

2.1.1 — Keyboard

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Infinite scroll where new content loads only on wheel/touch scroll events.

Example 

chatHistory.addEventListener('wheel', (e) => {
  if (chatHistory.scrollTop === 0 && e.deltaY < 0) loadOlderMessages();
});
chatHistory.addEventListener('touchmove', checkScrollTop);
// no keydown handler, so arrow keys or Page Up never trigger loading older messages

Why it matters

A customer tabbing into the chat transcript cannot load earlier messages with the keyboard, so they lose context from earlier in the conversation.

How to test

Tab to a 'load more' region and press Enter/Space, or just wait: if new content only loads on wheel/touch scroll events, keyboard users can't trigger it.

How to fix

Once a scrolling container is focusable, add the same load-more check to keydown that wheel and touchmove already use.

chatHistory.setAttribute('tabindex', '0');
chatHistory.addEventListener('keydown', (e) => {
  if ((e.key === 'ArrowUp' || e.key === 'PageUp') && chatHistory.scrollTop === 0) {
    loadOlderMessages();
  }
});

Outcome

A customer focuses the chat log and presses the up arrow to pull in earlier messages.

Who is affected

Keyboard-only users focused on the message list have no way to trigger the load of older chat history.

Learn more

Related scenarios