Skip to content
Relements Relements

Pagination

Page navigation in a <nav aria-label="Pagination">. Mark the current page with aria-current="page" and disable prev/next at the ends with aria-disabled="true". Works with real <a> links or <button>s.

Section titled “Links”
Live example
<nav class="re-pagination" aria-label="Pagination">
  <a class="re-pagination__item" href="#1" rel="prev">Previous</a>
  <a class="re-pagination__item" href="#1">1</a>
  <a class="re-pagination__item" aria-current="page" href="#2">2</a>
  <a class="re-pagination__item" href="#3">3</a>
  <span class="re-pagination__ellipsis" aria-hidden="true">…</span>
  <a class="re-pagination__item" href="#9">9</a>
  <a class="re-pagination__item" href="#3" rel="next">Next</a>
</nav>

Disabled ends

Section titled “Disabled ends”
Live example
<nav class="re-pagination" aria-label="Pagination">
  <span class="re-pagination__item" aria-disabled="true">Previous</span>
  <a class="re-pagination__item" aria-current="page" href="#1">1</a>
  <a class="re-pagination__item" href="#2">2</a>
  <a class="re-pagination__item" href="#3">3</a>
  <a class="re-pagination__item" href="#2" rel="next">Next</a>
</nav>

Accessibility

Section titled “Accessibility”
  • Keyboard — native links and buttons: Tab moves between page items, Enter follows a link (Space also activates a <button>). There’s no JavaScript and no custom roving focus — disabled ends are non-interactive <span>s, so Tab simply skips them.
  • Focus — each item shows a visible :focus-visible ring (--re-shadow-focus).
  • Semantics — the <nav aria-label="Pagination"> exposes a labelled navigation landmark. The current page carries aria-current="page" so assistive tech announces it; disabled prev/next render as <span aria-disabled="true"> (with pointer-events: none) rather than focusable controls.
  • Notes — the … ellipsis is decorative and marked aria-hidden="true". Under forced colors the accent fill flattens, so the current page is painted with the system Highlight/HighlightText colors to stay distinguishable. See the accessibility guide.