Accessible Load More Pattern | Nobody's Left Guessing

You’ve worked hard implementing a results loading component for your project.

You had heard the infinite scroll pattern has well-known accessibility problems, so you wisely implemented a “Load more” pattern instead. However, there are still accessibility questions that need to be answered.

For instance:

• How are state changes and results announced to screen readers?

• How does keyboard tab order work when your tab focus is on a load more button, and you then load a batch of new results. Where will your next tab go? (Spoiler: not where users expect)

• How well do aria-posinset and aria-setsize track a user’s position as they move down a list?

In this 24-minute video, you’ll hear a common “load more” pattern fail with a screen reader, then compare it to an accessible version, with pointers to the code techniques behind it.

This video was produced against a code example that I wrote, and was tested with VoiceOver and Safari as shipped with macOS 26.3.1.

Prefer reading over watching? Read the accompanying blog article:

(Blog) Accessible Load More Pattern | Nobody's Left Guessing

Want to play around with a code example? View it on GitHub:

(GitHub) Accessible Load More Pattern

Until next time fellow Code Jockeys, keep calm and keep coding on!