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

Question

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

2. Show More Button https://amp.dev/documentation/examples/interactivity-dynamic-content/show_more_button/
3. Adding a Load More Button to your Content https://www.solodev.com/blog/web-design/adding-a-load-more-button-to-your-content.stml
4. How to add load more button for a HTML/CSS page?
   How to add load more button for a HTML/CSS page?

Answer 1

There's no single answer to this question, but there's some guidance from W3 regarding the opening and closing of modals (which are also a 'wholesale' shift in what's available to the UI, and therefore comparable).

Also there is this article, and these survey results (both from the esteemed Marcy Sutton) which may help make the right choice.

As always, testing with a representative group of your own actual users, and using analytics will serve your users better than designing for imaginary or 'generic' users.