RE: Focus order and Load More functions

I think the answer is going to be context-dependent. At first sight it would appear that moving the focus to the first new item is clearly best. You would probably want to use an ARIA live region to announce that new content has loaded. However, I have a use case where the other option is best for me.

The online shopping website that I use only displays 16 search results at a time and there is a "load more" button at the bottom. It helpfully tells me how many items are displayed and what the total number of search results is. Since items go in and out of stock, I always want to see all the search results, so I have to click the button, wait for the additional content to be inserted, scroll to the end of the page, click the button again etc. etc. It would be so much easier if the focus remained on the button so I could operate it repeatedly.

Arguably, it's just bad design and they should have used pagination instead of what is effectively infinite scroll (albeit with a button). Personally, I have a profound dislike for both infinite scroll and "load more" buttons regardless of context. Nielsen Norman have done extensive research that shows that "Long, endless pages are good for time-killing activities" but are "not recommended for goal-oriented finding tasks".

https://www.nngroup.com/articles/infinite-scrolling/

Steve Green
Managing Director
Test Partners Ltd


From: Will Ringland <wringlan@epic.com>
Sent: 17 August 2020 14:15
To: w3c-wai-ig@w3.org
Subject: Focus order and Load More functions

Hello all,

Are there best practices for focus handling when a list has a "load more" function? In particular, when the load more function appends data to an existing list without a age refresh. When a user actuates the button, the options seem to be:

  1.  Move focus to the first item in the newly-loaded list.
  2.  Keep focus on the Load More button

Both options present problems.  Moving focus backwards can be confusing. Leaving focus on the button means a user has to back through the loaded list which could be long. In both cases, screen reader interaction is complex - like how do you notify the screen reader user that the existing list is longer but is the same list, focus has moved into said list, and there are now more items in it.

Most of that would be handled, I suspect, by good list markup for the item numbering and counts.  But shifting context seems to be the tricky question.

What do you all think is the best way to handle same-page Load More functions and post-load focus handling to best support accessibility?

Will Ringland
All Epic Accessibility
Accessible design is Epic design.
He/Him