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.
- Focus is moved to the start of the new content. This could be achieved using a tabindex-1 and scripting to set focus.
- 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