Pagination

Purpose

Pagination allows users to navigate through large sets of content divided into pages. It must clearly indicate the current page and provide a clear navigation mechanism.

Accessibility Considerations

• Wrap in a <nav> element with aria-label="Pagination"
• Mark the current page link with aria-current="page"
• Disabled next/previous controls use aria-disabled="true" and visual styling

Keyboard Support

Standard link keyboard behavior. Tab moves through each page link. Provide skip-to-page-top if pagination is at the bottom of long content.

ARIA Requirements

• aria-label="Pagination" on the <nav> wrapper
• aria-current="page" on the current page item

Live Example

Code Example

<nav aria-label="Pagination">
  <ul>
    <li>
      <a href="/page/1/" aria-label="Previous page">&lsaquo; Previous</a>
    </li>
    <li>
      <a href="/page/1/" aria-label="Page 1">1</a>
    </li>
    <li>
      <a href="/page/2/" aria-label="Page 2, current page" aria-current="page">2</a>
    </li>
    <li>
      <a href="/page/3/" aria-label="Page 3">3</a>
    </li>
    <li>
      <a href="/page/3/" aria-label="Next page">Next &rsaquo;</a>
    </li>
  </ul>
</nav>