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.

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>