SSP - Single standard for pagination

The SSP standard defines requirements for the semantics, accessibility, and logic of page-by-page navigation.

Structure

The entire pagination block must be wrapped in a <nav> tag to indicate the navigation area. Page numbers must be implemented as an ordered list <ol>. The back and forward buttons are located inside <nav> before and after the list, respectively.

Behavior and accessibility

The active page is always marked with the aria-current="page" attribute for screen readers to work correctly. Back and forward links must be blocked and become inactive when the first and last pages are reached. The current page must be highlighted with a visually contrasting style. If there are a large number of pages, ellipses are used to separate the first, last, and central groups of links.

If you are not using libraries or frameworks that prevent standard link behavior, you need to reset this behavior and request data for the page using a function when clicked.

Final example

<nav class="pagination">
  <a href="#" class="pagination__link disabled">Previous</a>
  <ol class="pagination__list">
    <li>
      <a href="?page=1" class="pagination__link">1</a>
    </li>
    <li>
      <span class="pagination__ellipsis">...</span>
    </li>
    <li>
      <a href="?page=4" class="pagination__link">4</a>
    </li>
    <li>
      <a href="?page=5" class="pagination__link active" aria-current="page">5</a>
    </li>
    <li>
      <a href="?page=6" class="pagination__link">6</a>
    </li>
    <li>
      <span class="pagination__ellipsis">...</span>
    </li>
    <li>
      <a href="?page=20" class="pagination__link">20</a>
    </li>
  </ol>
  <a href="?page=6" class="pagination__link">Next</a>
</nav>