• Success Criterion 2.4.3
  • Conformance level A

Focus Resetting to the Top After Loading More Content

2.4.3 — Focus Order

Scenario

Setting

A video streaming service's show detail page

What’s wrong

After activating a load-more/expander control, focus resets to the top of the page instead of continuing at the injected content.

Example 

loadMoreBtn.addEventListener('click', async () => {
  const episodes = await fetchMoreEpisodes();
  renderEpisodes(episodes);
  window.scrollTo(0, 0);
  document.querySelector('.site-logo').focus();
});

Why it matters

After loading more episodes, focus jumps back to the site logo at the top, forcing the viewer to tab through the whole page again.

How to test

Activate a 'load more' or expand control and press Tab: check whether focus moves to (or starts at) the newly loaded content, rather than resetting to the top of the page.

How to fix

Focus should continue where new content was inserted, not snap back to the page's starting point.

loadMoreBtn.addEventListener('click', async () => {
  const episodes = await fetchMoreEpisodes();
  const firstNew = renderEpisodes(episodes);
  firstNew.setAttribute('tabindex', '-1');
  firstNew.focus();
});

Outcome

A viewer clicks Load More and lands right on the next new episode, continuing without backtracking.

Who is affected

Keyboard users browsing a show's episode list must re-navigate the entire page after every load-more click.

Learn more

Related scenarios