Skip to content

Instantly share code, notes, and snippets.

@Manyaka
Last active June 16, 2021 07:40
Show Gist options
  • Save Manyaka/57d8024fb15b014dbfbdff8829ae55c8 to your computer and use it in GitHub Desktop.
Save Manyaka/57d8024fb15b014dbfbdff8829ae55c8 to your computer and use it in GitHub Desktop.
Pagination a11y
<nav class="pagination" aria-label="pagination">
<a class="pagination__item pagination__item--first-page" href="#">
<span class="visually-hidden">Первая страница</span>
</a>
<a class="pagination__item pagination__item--previous-page" href="#" rel="prev">
<span class="visually-hidden">Предыдущая страница</span>
</a>
<a class="pagination__item" href="#">
<span class="visually-hidden">страница</span>
1
</a>
<a class="pagination__item" href="#">
<span class="visually-hidden">страница</span>
2
</a>
<a
class="pagination__item pagination__item--current"
aria-current="page"
>
<span class="visually-hidden">страница</span>
3
</a>
<a class="pagination__item" href="#">
<span class="visually-hidden">страница</span>
4
</a>
<span class="pagination__item pagination__item--gap">
...
</span>
<a class="pagination__item" href="#">
<span class="visually-hidden">страница</span>
8
</a>
<a class="pagination__item pagination__item--next-page" href="#" rel="next">
<span class="visually-hidden">Следующая страница</span>
</a>
<a class="pagination__item pagination__item--last-page" href="#">
<span class="visually-hidden">Последняя страница</span>
</a>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment