5

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?
1
  • Hi @Laurence, thanks for your contribution to UXSE :) This is an interesting question and I think the answer will ultimately depend on the context and the type of application. If you are after best practice that also conforms to accessibility standards, I suggest providing a more specific use case to help with people who would like to answer the question better. Thanks.
    – Michael Lai
    Aug 6, 2019 at 2:56

3 Answers 3

1

If you don't set focus on the first item loaded by the last request, the user will lose track of the sequence. To access what they missed, they will have to SHIFT+TAB all the way back. This is bad even for a sighted keyboard user.

focus sequence demonstration The numbers indicate focus sequence. See how focus remains on number 9 after we press "Load More"? The sequence is maintained. The screen reader will speak item 9 as soon as it is rendered.

2

In general, it's best to not move the user's focus. So if your "load more" button is still visible on the page after the new content is loaded, then the focus should stay on that button. Leaving the focus on "load more" will help comply to WCAG 3.2.2

Also, for accessibility purposes, it would be nice to announce how much more "stuff" was just loaded. That can be done with aria-live if you're creating a webpage, but I'll refrain from further details on that because that's more of an implementation detail not intended for StackExchange. You can find information on aria-live on StackOverflow.

1
  • then theoretically if the button was removed when clicked, focus could move the the first item of new content with an aria-live assertive to announce new loaded content, with possibly aria-relevant additions.
    – Laurence L
    Aug 7, 2019 at 3:48
1

There aren't clear solution.

It is worth asking several users what is more convenient for them. In my opinion, once the screen is still in place, the screen should remain unmoved - when the number of items on the list goes out of sight on the screen the screen position should change to the first new visible list element


Origin of this solution is aimed at reducing cognitive overload according to Miller's Law - The average person can only keep 7 (plus or minus 2) items in their working memory. This simplifies the browsing of many collections.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.