Twenty Fifteen: archive pagination links accessibility

[afercia]

Archive pagination links have the text "Page" hidden with display: none so it's "hidden" also for screen readers.
I would suggest to make that text available to screen readers and hide it only visually. Working on a patch.
Here's how the links look on desktop and mobile:

Suppose you're in page 2 of 5, screen readers will announce:

PREVIOUS (link)
1 (link) 3 (link) 4 (link) 5 (link)
NEXT (link)

Which is not clear, "1"... what? Would be far better this way:

PREVIOUS page (link)
page 1 (link) page 3 (link) page 4 (link) page 5 (link)
NEXT page (link)

And on small screens (screen readers are used on mobile devices too):

PREVIOUS page (link)
NEXT page (link)

On mobile though, the current page "Page" text is the only one displayed (and announced).
I'm considering to give just to screen reader users the ability to use also the hidden links.

Will try to take care of the uppercase thing too.

[afercia]

After some investigation I'd propose to:

• keep it simple
• serve all users the same content

Proposed patch just makes the "Page" text available to screen readers and adds it where needed to make things more clear. Tries to manage the "uppercase thing" where possible, without changing the theme appearance.

Small change also for the Next/Previous post navigation, to make screen readers read out:

• "Previous post (pause) {title}"
• "Next post (pause) {title}"

Strings are a bit long now and with a lot of HTML exposed to translators... improvements and updated patch welcome.

Please notice that with many pagination links, the "dots" … will be displayed, this can be an accessibility issue since there's no information provided about the "jump" and dots won't be read out when tabbing through links.
NVDA reads dots just when reading letter by letter (right/left arrow keys) and will read "dot dot dot". Btw this should be managed in core in paginate_links(). Accessibility team feedback needed :) See screenshot below.

A note on the way to reset the "screen-reader-text" rule: as "Page" is inside an inline element, width, height, and overflow don't apply. The "clip" property applies only to absolutely positioned element so all we need here is a switch between position: static and position: absolute.

Needs testing :)

dot dot dot:

[afercia]

Updated patch with appropriate heading text for search results pagination

[iandstewart]

@afercia can you test and update with the updated pagination?

[afercia]

Updated patch for the new core template tags

[afercia]

Accessibility team, anyone interested: please test :)
Outstanding issues:

• with the new core template tags the heading can't be changed or filtered so it's impossible to have, for example, "Search results navigation" as heading in the search. With custom post types (say "Products") it will still be "Post navigation". Maybe this deserves a separate ticket.
• the "jump" between page links, visually represented with "dot dot dot", doesn't give any useful information... will users understand why after "Page 1 link" they hear, say, "Page 14 link"?
• the current page item should have some special text to announce it's... current :)

[afercia]

Please forget patch .3: prev and next text had to be switched, done in .4

[iamtakashi]

Updated patch

[iamtakashi]

The patch was out of sync so I updated and adjusted a few things that I've noticed.

[davidakennedy]

I've tested this and everything works as expected from an accessibility perspective.

[iandstewart]

In 30316:

Twenty Fifteen: adding context to pagination links for screenreaders.

Props afercia, iamtakashi, fixes #30152

[SergeyBiryukov]

Replying to afercia:

Small change also for the Next/Previous post navigation, to make screen readers read out:

• "Previous post (pause) {title}"
• "Next post (pause) {title}"

Strings are a bit long now and with a lot of HTML exposed to translators... improvements and updated patch welcome.

The problem is that we're trying to merge two different strings here, a standalone "Next" and "Next post". Some languages would want to translate the "Next" differently in each case (e.g. Next/Previous becomes Forward/Back).

30152.6.patch​ is an attempt to clean things up a bit:

• Uses the existing Next/Previous strings from the slider.
• Adds context for the 'post:' string, so that a reworded 'next' or 'previous' could be added in the translation.
• Removes extra HTML from the strings.
• Should be read out the same way it does now.
• Should work with RTL, as it does not affect text direction.

30152.7.patch​ is another iteration which keeps the placeholders just in case.

[afercia]

Tested both last patches with Firefox + NVDA and yes they're read out the same way, NVDA is happy. Thanks very much Sergey.

Wondering if something similar to what was done for the Publish postbox in the admin would be a better solution:

<span aria-hidden="true">Edit</span>
<span class="screen-reader-text">Edit status</span>

[SergeyBiryukov]

Oh yes, that would be better. I was looking for a way to hide the "Next" string from screen readers, and forgot about aria-hidden. I'll update the patch in a couple of hours.

[SergeyBiryukov]

30152.8.patch​ is the updated patch that uses aria-hidden.

[afercia]

Thanks very much Sergey, tested 30152.8 and tested again also index, archives and search results pagination. Seems all is fine. For the records, here's how Firefox + NVDA read out the_post_navigation():

navigation landmark
Post navigation
heading level 2

Previous post:
Markup: Image Alignment
visited link

Next post:
Hello world!
visited link

[lancewillett]

In 30834:

Twenty Fifteen: update archive pagination links to use aria-hidden for better accessibility.

Props SergeyBiryukov, fixes #30152.

[netweb]

The twentyfifteen.pot needs updating after r30834

[ocean90]

In 30845:

Twenty Fifteen: Update the .pot file for [30834].

fixes #30152.