Pager
The pager provides orientation on where the user currently is. It also serves as navigation at the same time.
<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 flix-pager__link--active" 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>Details
flix-pager itself has no modifiers however flix-pager__link has some, here is the list:
| Selector | Description |
|---|---|
flix-pager__link--active | triggers element's active state |
flix-pager__link--disabled | shows item as inactive |
flix-pager__link--prev | displays previous button |
flix-pager__link--next | displays next button |
Creating an accessible pagination component
- All navigation landmarks elements must have an
aria-labelto allow assistive technologies users to better identify them. Pagination navigation can have internationalized "Pagination" as the label. - "Previous Page" and "Next Page" links don't show any text, but it is important to provide it anyways, so we use
flix-sr-onlyhelper to make the text accessible and yet invisible. - Add
aria-current="page"to the current active item to inform AT of the current state of the pagination. - "Previous 5 pages" and "Next 5 pages" links only display three dots, but that's not enough to AT users, so you must add the actual description of these links using the
flix-sr-onlyhelper, and hide the irrelevant...usingaria-hidden="true". This will ensure only the relevant information is read and that the links make sense.
