Pagination Accessibility: Screen Reader Focus When Clicking On "Older Posts"

[pauljacobson]

Summary

A user came into chat with the following request:

When scrolling through my blog posts, I find a button that says "Older Posts". However, as a screenreader user, I am having difficulties finding the popping up posts underneath, and if the cursor jumps upwards too far, I am not able to get any of the next few posts visible to me. Is there an option to just click on "next/previous page" or choose the desired page number from a list so I first don't have to press this older posts button? In other words, is it possible to just show one particular page (page 2, for instance) with only the next ten posts?

At first I thought this was an Infinite Scroll issue. The user disabled the option in Settings > Writing. The result was a button reading "Older posts". This didn't really resolve the issue, though. We explored this a little further, and the user explained what they were experiencing:

The thing is if you click a link or a button and the site is refreshing itself or updating content, the cursor either jumps to the far top or to a random spot on the page and the screenreader starts reading from there. There's no way to really change the screenreader's performance from my end I'm afraid.

It seems like there's some sort of interaction between their screen-reader and the site when the user clicks on that button to load older posts. Instead of allowing the user to scroll down to see older posts, the screen-reader seems to take them away from that point.

What the user wants

Ideally, what the user wants is a different post pagination option where they can click through to different pages (like this). I remember seeing this pagination option last year when we were dealing with a rush of Infinite Scroll issues on sites. Most themes had three options:

• Infinite Scroll,
• Theme-specific pagination, and
• A sort of generic pagination.

I'm pretty sure one of these options was what the user's aiming for. I tested a number of themes (Independent Publisher 2, Twenty Nineteen, Twenty Sixteen, and Penscratch - I believe), and they all have a binary option for pagination - either Infinite Scroll is active, or the theme uses the "Older posts" button.

A possible solution

Barring a theme that has the sort of pagination option the user's looking for, I thought about using a page with a shortcode along these lines: [display-posts posts_per_page="5" wrapper="div" include_excerpt="true" image_size="medium"]

The main thing here is the posts_per_page="5" parameter. I hoped that this would give the user an option to create a similar result, but using a Display Posts Shortcode. When I added the shortcode, I only saw the five posts the shortcode, but no pagination links.

I then added a Page Break block (the <!--nextpage--> option behaves the same way), and although the pagination worked, the subsequent pages didn't display the posts because the shortcode was on the first page.

@GaryJones made the following suggestion in a comment on my P2 post (link below):

As a quick suggestion, on success of the older posts loading, one could force focus on to the first of the newly loaded pages? Or at least back on to the button itself, so that they can continue from where they left off.

The user asked to be kept updated on possible solutions.

Steps to Reproduce

1. The user disabled Infinite Scroll
2. They clicked on the resulting "Older posts" button
3. They noticed that the "cursor either jumps to the far top or to a random spot on the page and the screenreader starts reading from there".

Expected Result

The screen reader should retain a focus on either the location of the "Older posts" or, preferably, the title of the first post loaded by clicking on that button.

Actual Result

The cursor jumps to other parts of the site, away from the newly loaded posts, making it very difficult for a user reliant on a screen reader to browse through additional posts.

Site Info

• Ticket: 1742105-zen
• Have the user confirmed that we can access their site? Yes, this is a WordPress.com site
• Other Links: p4vt7e-4n-p2

[aheckler]

@pauljacobson This is probably a better fit for the public Jetpack repo:

https://github.com/Automattic/jetpack

... since this is a reproducible enhancement request. I'm going to transfer this there.

[jeherve]

what the user wants is a different post pagination option where they can click through to different pages (like this).

Such options can only be handled by a custom plugin or some extra code in the theme, since it does not come with WP or Jetpack by default. This plugin, for example, could work: https://wordpress.org/plugins/wp-paginate/

That's not really an option on WordPress.com, though. Maybe you could try with the Archives shortcode instead? https://en.support.wordpress.com/archives-shortcode/

All in all, this may be a good enhancement request for Infinite Scroll, but we don't currently work on that feature so it may not be implemented any time soon.

[SiobhyB]

There was a +1 for a pagination option in 13663437-hc.

[stale[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[scottsweb]

Just jumping in to do some testing here. Referring back to the original request, I am not sure the reporter managed to get in the state they were after.

The user disabled Infinite Scroll They clicked on the resulting "Older posts" button They noticed that the "cursor either jumps to the far top or to a random spot on the page and the screenreader starts reading from there".

If infinite scroll was disabled fully, the "older posts" button would not have been visible, or visible alongside paginated numbers. A quick test in both Twenty Nineteen and Twenty Sixteen for example show the default paginations options work as they hope them to:

This leads me to believe they had not turned off infinite scroll fully. There are three options in the infinite scroll section:

I believe they are currently set to this middle option (highlighted), setting it to "the default theme behaviour" should have solved this issue (providing their theme supported numbered pagination).

There does appear to be a valid accessibility issue with the load more button option, I will see if I can get that fixed.

[scottsweb]

Pull request opened: https://github.com/Automattic/jetpack/pull/16104 - feedback on the implementation welcome.