[wp-trac] [WordPress Trac] #30152: Twenty Fifteen: archive pagination links accessibility

[WordPress Trac]

#30152: Twenty Fifteen: archive pagination links accessibility
-------------------------------------+--------------------------------
 Reporter:  afercia                  |       Owner:
     Type:  enhancement              |      Status:  new
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Bundled Theme            |     Version:  trunk
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  ui, accessibility
-------------------------------------+--------------------------------
Changes (by afercia):

 * keywords:   => has-patch needs-testing


Comment:

 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:
 [[Image(https://cldup.com/NTXduNWP7n.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30152#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform