[wp-trac] [WordPress Trac] #54260: Add accessible labels to pagination links

[WordPress Trac]

#54260: Add accessible labels to pagination links
---------------------------+-----------------------------
 Reporter:  michaelbourne  |      Owner:  (none)
     Type:  enhancement    |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  General        |    Version:  5.8.1
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 The default behavior of `paginate_links` is to output link text with no
 context around the page numbers that the text represents.

 WP Ref:
 https://developer.wordpress.org/reference/functions/paginate_links/

 This is a sample of the default output:

 {{{
 <div class="nav-links">
   <span aria-current="page" class="page-numbers current">1</span>
   <a class="page-numbers" href="">2</a>
   <span class="page-numbers dots">…</span>
   <a class="page-numbers" href="">13</a>
   <a class="next page-numbers" href="">Next</a></div>
 }}}

 I believe the more accessible output would be this:

 {{{
 <div class="nav-links">
   <span aria-current="page" class="page-numbers current">1</span>
   <a class="page-numbers" href="" aria-label="Page 2">2</a>
   <span class="page-numbers dots">…</span>
   <a class="page-numbers" href="" aria-label="Page 13">13</a>
   <a class="next page-numbers" href="" aria-label="Next
 Page">Next</a></div>
 }}}


 This falls short of what most of us would call an acceptable level of
 readability for users with assistive technologies. A few small code
 changes could alleviate this, I believe.

 W3 Ref: https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels
 #dfn-label

 To go along with this, a small change to `get_the_posts_pagination` should
 be used to supply the translatable string for this label.

 WP Ref:
 https://developer.wordpress.org/reference/functions/get_the_posts_pagination/

 {{{
         $args = wp_parse_args(
             $args,
             array(
                 'mid_size'           => 1,
                 'prev_text'          => _x( 'Previous', 'previous set of
 posts' ),
                 'next_text'          => _x( 'Next', 'next set of posts' ),
                 'screen_reader_text' => __( 'Posts navigation' ),
                 'aria_label'         => __( 'Posts' ),
                 'links_aria_label'   => __( 'Page' ),
                 'class'              => 'pagination',
             )
         );
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54260>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform