SSP - ページネーションの統一規格

定義

SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

構造とセマンティクス

ページネーションブロック全体は、ナビゲーション領域を示すために <nav> タグで囲みます、ページ番号は、順序付きリスト <ol> の形式で実装する必要があります、前のページへ進むボタンと次のページへ進むボタンは、それぞれリストの前後に配置されます。

アクセシビリティ

アクティブなページには、スクリーンリーダーが正しく動作するように、常に 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>