Semanticus CSS

Appearance

Pagination ​

Pagination is a navigation pattern that allows users to move between pages of content.

  • Use a <nav> element with an aria-label to identify the pagination region
  • Wrap page controls in a role="group" for proper semantic grouping
  • Use buttons when pagination triggers dynamic content updates without page reloads
  • Use anchor links when pagination navigates to distinct URLs

Basic Pagination ​

The simplest pagination pattern uses buttons within a group:

Note: When a step isn't available yet but should be announced, use aria-disabled="true" instead of the native disabled attribute to keep the element focusable and discoverable by assistive technology users. Remember that aria-disabled does not block activation on its own, so you must also prevent activation/navigation in code (for example, in a JavaScript handler). In case you want to remove it from the tab order as well, add tabindex="-1".

live preview
editable html
<nav aria-label="Pagination">
  <div role="group">
    <button>Previous</button>
    <button>1</button>
    <button>2</button>
    <button aria-current="page">3</button>
    <button aria-disabled="true" tabindex="-1">Next</button>
  </div>
</nav>

For server-side rendering or distinct page URLs, use anchor elements with role="button":

Note: disabled is not a valid attribute for <a> elements, so in this case you really need to use aria-disabled="true" instead.

live preview
editable html
<nav aria-label="Pagination">
  <div role="group">
    <a role="button" aria-disabled="true" tabindex="-1">Previous</a>
    <a href="#page-1" role="button" aria-current="page">1</a>
    <a href="#page-2" role="button">2</a>
    <a href="#page-3" role="button">3</a>
    <a href="#page-3" role="button">Next</a>
  </div>
</nav>

Accessibility Considerations ​

  • Always include an aria-label on the <nav> element to identify the pagination region, as well as avoiding the need to label the [role="group"] element.
  • Use aria-current="page" to indicate the current page to assistive technologies
  • Disable (don't hide) navigation buttons when they are unavailable (e.g., "Previous" on page 1)
  • Ensure keyboard users can navigate between page controls using Tab/Shift+Tab
  • Consider adding aria-live regions to announce page changes to screen reader users