Making Dynamic Content Accessible Without Page Reload

You've entered an online shop, seen 30 products, scrolled down a bit, and suddenly 30 more appear without the page refreshing. Sound familiar? This is exactly one of the most common examples of dynamic content.

What feels like a natural and smooth experience to us can become a frustrating challenge for those who navigate using only a keyboard or rely on screen readers. Users with certain disabilities may not realize the content has refreshed, won't know where to start reading, and might miss entirely the fact that something new has been added to the page.

It's the responsibility of website owners to make their sites accessible, even in these details, and to think about how to guide users in a clear, natural, and fair way—all within content that's constantly changing.

Infinite Scroll and Loading More Content

With automatic "infinite" loading, content continues to flow and load as the user scrolls down. On fashion sites, for example, this might mean more and more clothing items; on news sites, more headlines and articles.

To make the experience accessible, it's important that focus moves directly to the beginning of the new area. So if 30 more products are added after the original 30, focus should start at product 31. Otherwise, the user might find themselves going back through items they've already seen or missing the new ones that were added—a frustrating and problematic process for someone with a disability trying to navigate the site.

What About a "Load More" Button?

There's no difference—it's exactly the same situation.

In this case, the user deliberately clicks a load button while already at the bottom of the content, and then a new batch of items loads.

Here too, it's important to make sure focus doesn't jump back to the beginning of the newly added content! Remember: your user has no way to know this is happening, and it's a short path from there to confusion, lack of clarity, and in many cases, the user abandoning your site.

Adding Products to the Shopping Cart

Imagine this scenario: a user clicks an "Add to Cart" button and a small green message appears on screen announcing that "the product has been added to your cart." In some cases, a side popup even appears with additional offers or confirms the product was added.

For a sighted user, everything is clear. But for someone using a screen reader due to vision loss or blindness, this might pass by without any indication at all.

A basic rule in web accessibility: there must be a clear announcement stating that the product has been added to the cart.
Additionally, if the cart total has changed, if additional products have been added to recommendations, or if there's an error (like a double-click that added the same product twice), all of these must be accessible and clear.

Only then can the user experience the same quality of interaction as any other visitor to your site.

Things can get complicated when dealing with popups that disappear after a few seconds. For a regular user, that's enough—they've already seen it. But a blind user might miss the information. That's why it's important to give at least a brief audio announcement of the action performed, without overloading with details that will disappear anyway.

Don't Overwhelm—Do Provide Access

The big challenge in making dynamic content accessible is balance.

On one hand, you can't leave the user without vital information; on the other, you shouldn't bombard them with unnecessary announcements.
The right approach is to provide what really matters: an action that was performed, new items that were added, a significant update on the page. Everything else can stay behind the scenes.

For example, if a sidebar window opens with additional offers, you can choose whether to read all of them or just mention that new offers exist and can be reviewed. The goal is for the user to feel part of the process, not overwhelmed by it.

Logical Order in Site Code

When new content is added to a form or multi-step page, the order in which it appears in the code is critical.

For instance: if the user is on field 3, and clicking something opens a new field, its place should be right after the previous field. This way, the sequence is preserved, and the user understands they're simply moving forward.

If, on the other hand, the new field is inserted in the middle of the code or somewhere else entirely, the user will lose context.
This might sound technical—something relegated to the behind-the-scenes workings of your site—but for screen reader software, this is one of the key differences between clear browsing and confusion.

The Bottom Line

Dynamic content is meant to make browsing smoother and faster. However, if you don't make it accessible properly, it can create exactly the opposite experience.

Someone navigating your site using only a keyboard or relying on screen reader software needs a consistent flow of information, clear notification of every change, and a logical order that allows them to get their bearings.

It's simple: focus must reach the new area, announcements of changes must be read aloud and clearly indicated, and code must maintain sequence.

And what we've described here is just one piece of the puzzle. We'd be happy to review your site and discuss how we can help you become accessible and clear to all your visitors.