Re: Focus order and Load More functions

Hi Will,

First of all the developer inside of me is scared and the question, that immediately comes up is? Why anybody should do this?

So before trying to solve this problem. I would try to figure out a way to avoid this problem.

If this is not possible, than you will really have to consider several success criterions to get formal conformance and give a lot of help to actual users to be able to understand, what you did.

I at least have to guess, what happens there, so your description for at users must be improved compared to this mail ;-)

As you already said: putting the focus to wherever will cause problems for the user. So you need to think carefully about what information to give and how to give it. I think you will need a combination of aria-describedby and live region.

Than I think putting the focus to the start of the changed list would make sense and offering an option to go back to the button, that maybe was activated by mistake.

My guess is, that you have a list with few items and after a click on the button, there will be more list items. So there should be a marker to identify old and new items. aria-label and visual hint should do the job.

Also this list is a (partially) collapsed item, which can be expanded. Honestly I don’t know how, but this Information you should also provide to The screenreader user...

Last but not least you have to inform about the state (collapsed or expanded). And using so much aria is a strong sign, that you’re on the wrong way, so really, if there is any chance to display the new items in another way, than try to figure this out.

Mit freundlichen Grüßen,

Marc Haunschild
www.mhis.de - web designed for YOU!

On 17. Aug 2020, at 15:19, Will Ringland <wringlan@epic.com> wrote:


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