Pagination may not be conveyed correctly

[anevins]

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.

[netweb]

Replying to anevins:

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>

Adding bbPress' "out of the box" format for reference::

<div class="bbp-pagination">
    <div class="bbp-pagination-count">Viewing 1 topics - 1 through 1 (of 5 total)</div>
    <div class="bbp-pagination-links"><span class="page-numbers current">1</span>
        <a class="page-numbers" href="http://example.com/forums/forum/category-forum/forum-forum/page/2/">2</a>
        <span class="page-numbers dots">…</span>
        <a class="page-numbers" href="http://example.com/forums/forum/category-forum/forum-forum/page/5/">5</a>
        <a class="next page-numbers" href="http://example.com/forums/forum/category-forum/forum-forum/page/2/">→</a>
    </div>
</div>

The Viewing 1 topics - 1 through 1 (of 5 total) was removed from the wporg-support theme for performance reasons as part of r3895 and r3898

---

Replying to anevins:

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.

Sounds good, we can achieve this using ​paginate_links and adding pagination-*.php customised templates

• ​https://bbpress.trac.wordpress.org/browser/trunk/src/templates/default/bbpress/pagination-replies.php
• ​https://bbpress.trac.wordpress.org/browser/trunk/src/templates/default/bbpress/pagination-search.php
• ​https://bbpress.trac.wordpress.org/browser/trunk/src/templates/default/bbpress/pagination-topics.php

[Clorith]

This will be included in the next bbPress deploy on .org, so marking as fixed as the issue it self has been resolved just not deployed yet.