WordPress.org

Making WordPress.org

Opened 2 years ago

Closed 15 months ago

#2549 closed defect (fixed)

Pagination may not be conveyed correctly

Reported by: anevins Owned by:
Milestone: Priority: normal
Component: Support Forums Keywords:
Cc:

Description

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.

Attachments (1)

pagination.png (25.2 KB) - added by anevins 2 years ago.

Download all attachments as: .zip

Change History (4)

@anevins
2 years ago

#1 in reply to: ↑ description @netweb
2 years ago

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

This ticket was mentioned in Slack in #forums by clorith. View the logs.


15 months ago

#3 @Clorith
15 months ago

  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.