[wp-meta] [Making WordPress.org] #2549: Pagination may not be conveyed correctly

[Making WordPress.org]

#2549: Pagination may not be conveyed correctly
----------------------------+-----------------
 Reporter:  anevins         |      Owner:
     Type:  defect          |     Status:  new
 Priority:  normal          |  Milestone:
Component:  Support Forums  |   Keywords:
----------------------------+-----------------
 The pagination component consists of links that lead to other pages. This
 may be clear to sighted users from its visual appearance, but not to
 people with visual impairments or users of assistive technologies.

 I have found the pagination component on this template but it may be on
 other templates:
 https://wordpress.org/support/forum/how-to-and-troubleshooting/

 '''Current structure:'''

 {{{
 <div class="bbp-pagination-links">
     <span class="page-numbers current">1</span>
     <a class="page-numbers" href="...">2</a>
     <span class="page-numbers dots">…</span>
     <a class="page-numbers" href="...">38,513</a>
     <a class="next page-numbers" href="...">→</a>
 </div>
 }}}
 '''Issues with current structure:'''
 - The links are missing context. The numbered link text ("1" and "2") is
 not enough to easily identify where the links will lead to.
 - I don't think the arrow character will be conveyed as the next paginated
 item to assistive technologies.


 '''Suggested solution:'''
 The pagination component could be restructured to use a navigation
 element. This should convey to people that links within this component are
 navigational links and represent pages in the website.

 '''Suggested structure:'''
 HTML:

 {{{
 <nav class="bbp-pagination-links" aria-label="Pages of topics">
   <ul>
     <li><span class="page-numbers current">1</span></li>
     <li><a class="page-numbers" href="...">2</a></li>
     <li><span class="page-numbers dots">…</span></li>
     <li><a class="page-numbers" href="...">38,513</a></li>
     <li>
       <a class="next page-numbers" href="...">
         →
         <span class="hidden">next</span>
       </a>
     </li>
   </ul>
 </nav>
 }}}
 CSS:
 {{{
 .bbp-pagination-links li {
     display: block;
     float: left;
 }

 .bbp-pagination-links .hidden {
     left: -999em;
     position: absolute;
 }
 }}}

 The value inside the 'aria-label' attribute could be changed to reflect
 something more accurate, but if this component is used in many places
 maybe it's good to keep it generic.

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/2549>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org