SSP - Единый стандарт для пагинации

Стандарт SSP определяет требования к семантике, доступности и логике работы постраничной навигации.

Структура

Весь блок пагинации обязательно оборачивается в тег <nav> для обозначения навигационной области. Номера страниц должны быть реализованы в виде упорядоченного списка <ol>. Кнопки перехода назад и вперёд располагаются внутри <nav> до и после списка соответственно.

Поведение и доступность

Активная страница всегда помечается атрибутом aria-current="page" для корректной работы экранных дикторов. Ссылки назад и вперёд должны блокироваться и становиться неактивными при достижении первой и последней страниц. Текущая страница обязательно выделяется визуально контрастным стилем, при большом количестве страниц используются многоточия для разделения первой, последней и центральной групп ссылок.

Если вы не используете библиотеки или фреймворки которые предотвращают стандартное поведение ссылок, то вам нужно сбросить это поведение и при клике запрашивать данные для страницы с помощью функции.

Итоговый пример

<nav class="pagination">
  <a href="#" class="pagination__link disabled">Назад</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">Вперед</a>
</nav>