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