ページネーション
Startify-UIで提供されるページネーションのコンポーネントです。
ページネーションリンク
ページネーションリンクのコンポーネントにはsu-paginationのクラス名を付与します。
ul要素などのリスト要素を用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。ページ繰りのラベル文字としては矢印などの記号のほかにもリンク先を示すテキストが用いられます。
検索結果やカテゴリ一覧などのリスト化されたデータを扱うページにおいて、ページ割りをする場合に用いられ、複数ページに分割することで、ユーザーの利便性を高めます。
-
記号
arrow type
-
テキスト
text type
<nav aria-label="ページネーション">
<ul class="su-pagination" role="list">
<li>
<a href="/posts/" aria-label="最初のページ"><span aria-hidden="true">«</span></a>
</li>
<li>
<a href="/posts/?page=1" aria-label="前のページ"><span aria-hidden="true">‹</span></a>
</li>
<li>
<span aria-hidden="true">…</span>
</li>
<li>
<a href="/posts/?page=2" aria-label="ページ2" aria-current="page"><span aria-hidden="true">2</span></a>
</li>
<li>
<a href="/posts/?page=3" aria-label="ページ3"><span aria-hidden="true">3</span></a>
</li>
<li>
<a href="/posts/?page=4" aria-label="ページ4"><span aria-hidden="true">4</span></a>
</li>
<li>
<span>…</span>
</li>
<li>
<a href="/posts/?page=3" aria-label="次のページ"><span aria-hidden="true">›</span></a>
</li>
<li>
<a href="/posts/?page=99" aria-label="最後のページ"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>前後ページリンク
前後ページリンクのコンポーネントにはsu-next-previous-linksのクラス名を付与します。
ul要素などのリスト要素を用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。前後ページへの遷移を示すために包括する要素の幅の両端に配置されるようにスタイリングされています。
個別記事ページなどで、現在表示しているページの前後のページに遷移させる際に使用されます。連続するコンテンツページの移動をスムーズにさせます。
<nav aria-label="前後ページリンク">
<ul class="su-next-previous-links" role="list">
<li>
<a href="#" aria-label="前のページ"><span aria-hidden="true">前のページへ</span></a>
</li>
<li>
<a href="#" aria-label="次のページ"><span aria-hidden="true">次のページへ</span></a>
</li>
</ul>
</nav>アクセシビリティの支援
ページネーションリンク・前後ページリンクのコンポーネントではアクセシビリティの対応として、aria-label属性が設定されたnav要素でマークアップを行い、現在のページを示す要素には、aria-current="page"の属性を、aria-label属性でスクリーンリーダー使用時のラベルテキストの設定を行います。合わせて重複してテキストを読み上げされないよう、aria-hidden属性の設定も行います。
<nav aria-label="ページネーション">
<ul class="su-next-previous-links" role="list">
...
<li>
<a href="/posts/?page=2" aria-label="ページ2" aria-current="page"><span aria-hidden="true">2</span></a>
</li>
...
</ul>
</nav>