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

Определения

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

Структура и Семантика

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

Доступность

Активная страница всегда помечается атрибутом aria-current="page" для корректной работы экранных дикторов, а не активные кнопки должны иметь aria-disabled и tabindex="-1".

Интерактивность и Визуальный отклик

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

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

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