SSP - Single Standard for Pagination

Definitions

The SSP standard defines requirements for the semantics, accessibility, and logic of pagination.

Structure and Semantics

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

Accessibility

The active page is always marked with the aria-current="page" attribute to ensure screen readers function correctly, and inactive buttons must have aria-disabled and tabindex="-1".

Interactivity and Visual Feedback

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__previous disabled" aria-disabled="true" tabindex="-1">Previous</a>
  <ol class="pagination__list">
    <li class="pagination__item">
      <a href="?page=1" class="pagination__link">1</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__ellipsis">...</span>
    </li>
    <li class="pagination__item">
      <a href="?page=4" class="pagination__link">4</a>
    </li>
    <li class="pagination__item">
      <a href="?page=5" class="pagination__link active" aria-current="page">5</a>
    </li>
    <li class="pagination__item">
      <a href="?page=6" class="pagination__link">6</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__ellipsis">...</span>
    </li>
    <li class="pagination__item">
      <a href="?page=20" class="pagination__link">20</a>
    </li>
  </ol>
  <a href="?page=6" class="pagination__next">Next</a>
</nav>