Pager
The pager provides orientation on where the user currently is. It also serves as navigation at the same time.
The pagination is a navigation landmark. It requires an accessible aria-label that will identify the nature of this navigation to screen readers.
To highlight the current page, add the aria-current="page" attribute to the link or button element.
Previous, next and intermediate pages
The pager links have three modifiers:
flix-pager__link--disabled- shows item as inactive
flix-pager__link--prev- displays previous button
flix-pager__link--next- displays next button
"Previous Page" and "Next Page" links don't show any text, but it is important to provide it anyways, so we use flix-sr-only helper to make the text accessible and yet invisible.
To disable the previous and next page links, use the disabled attribute in combination with the flix-pager__link--disabled class modifier.
"Previous 5 pages" and "Next 5 pages" links only display three dots, but that's not enough to screen reader users, you must add the actual description of these links using the flix-sr-only helper, and hide the irrelevant dots using aria-hidden="true". This will ensure only the relevant information is read and that the links make sense.
<nav class="flix-pager" aria-label="Pagination">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<span class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true">
<span class="flix-sr-only">Previous page</span>
</span>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#" aria-current="page">
1
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
<span class="flix-sr-only">Previous 5 pages</span>
<span aria-hidden="true">...</span>
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
9
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
10
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
11
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
12
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
<span class="flix-sr-only">Next 5 pages</span>
<span aria-hidden="true">...</span>
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
102
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link flix-pager__link--next" href="#">
<span class="flix-sr-only">Next page</span>
</a>
</li>
</ul>
</nav>Content fit pager
You can also add custom content for pagination, and use buttons for the link elements. The difference between using links and buttons is:
- if each page leads to a different page (url) that can be bookmarked, then the pagination should use links.
- if the pagination buttons change data inside of the page and do not lead to another place, they should be buttons.
When using custom content you might want to use the flix-pager--content-fit modifier that will remove the width and height restraint from the items and set up adequate paddings:
<nav class="flix-pager flix-pager--content-fit" aria-label="Date picker">
<ul class="flix-pager__list">
<li class="flix-pager__item">
<span class="flix-pager__link flix-pager__link--prev flix-pager__link--disabled" aria-disabled="true">
<span class="flix-sr-only">Previous page</span>
</span>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#" aria-current="page">
<span class="custom-content">
<time dateTime="2022-09-08">Thu, 8 Sep</time>
<span class="flix-text--small" style="display:block">€45.99</span>
</span>
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link flix-pager__link--disabled" href="#" aria-disabled="true">
<span class="custom-content">
<time dateTime="2022-09-08">Thu, 8 Sep</time>
<span class="flix-text--small" style="display:block">€45.99</span>
</span>
</a>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link" href="#">
<span class="custom-content">
<time dateTime="2022-09-08">Thu, 8 Sep</time>
<span class="flix-text--small" style="display:block">€45.99</span>
</span>
</a>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link flix-pager__link--disabled" aria-disabled="true">
<span class="custom-content">
<time dateTime="2022-09-08">Thu, 8 Sep</time>
<span class="flix-text--small" style="display:block">€45.99</span>
</span>
</button>
</li>
<li class="flix-pager__item">
<button type="button" class="flix-pager__link">
<span class="custom-content">
<time dateTime="2022-09-08">Thu, 8 Sep</time>
<span class="flix-text--small" style="display:block">€45.99</span>
</span>
</button>
</li>
<li class="flix-pager__item">
<a class="flix-pager__link flix-pager__link--next" href="#">
<span class="flix-sr-only">Next page</span>
</a>
</li>
</ul>
</nav>