Where should keyboard focus go when a ‘load more’ content button is clicked

Where should keyboard focus go when a ‘load more’ button is clicked? On websites showing this functionality; either focus is moved to the top of the page when the button is clicked, or focus moves beyond the new content.

I find these methods problematic because how do keyboard users, and assistive technology users know where the new content is started—and easily move to this point.

I am looking for a solution, and although I can think of a couple of ways to address this, I am unsure of the best approach from an accessibility perspective.

  1. Focus is moved to the start of the new content. This could be achieved using a tabindex-1 and scripting to set focus.
  2. New content loads after the ‘load more’ the button remains in position and focus remains on the button. At the end of the new content a new ‘load more’ button appears.

I'm looking for best practice functionality that is also accessible

Sites already checked for a 'Load more' content button functionality

  1. Show More Button
  2. Adding a Load More Button to your Content
  3. How to add load more button for an HTML/CSS page?