Pagination Accessibility and Keyboard Support

Pagination Accessibility and Keyboard Support

ARIA Attributes

<nav aria-label="Pagination">
  <ul class="pagination" role="list">
    <li><a href="#" aria-label="Previous page" onclick="goToPage(currentPage - 1)">Prev</a></li>
    <li><a href="#" aria-label="Page 1" aria-current="page" class="active">1</a></li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><span aria-hidden="true">...</span></li>
    <li><a href="#" aria-label="Next page">Next</a></li>
  </ul>
</nav>

Key Attributes

• nav aria-label="Pagination": identifies the navigation region.
• aria-current="page": marks the current page.
• aria-label="Page N": describes each page link.
• aria-label="Previous/Next page": describes prev/next buttons.
• aria-hidden="true" on ellipsis: hides it from screen readers.

Keyboard Support

Use <a> or <button> elements (natively keyboard accessible). Tab moves between buttons. Enter activates. Add Left/Right arrow key support for faster navigation:

paginationDiv.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") goToPage(currentPage - 1);
  if (e.key === "ArrowRight") goToPage(currentPage + 1);
});

The Takeaway

Accessible pagination: nav with aria-label, aria-current="page" on the current page, aria-label on each link, aria-hidden on ellipsis. Use native <a> or <button> elements for keyboard access. Add Arrow Left/Right for fast navigation. Accessibility is important for pagination since it is a primary navigation mechanism.