Pagination Accessibility

Best Practices

Pagination may update the results immediately on the client via AJAX, or on the server via a full page reload. In both cases, the browser’s URL will be updated to reflect the new, book-markable page of results.

Do not use buttons for URL based pagination. Because the URL is updated, and the browser history stack updated, a link is the correct tag to use.

Pagination must have a heading element. For example “Results Pagination”. This heading can be hidden offscreen for sighted users.

Items must be marked up as a list of links (not buttons).

Bookends must be marked up as links (not buttons).

Bookend icons should be created using SVG.

Interaction Design

This section provides the pattern interaction design for keyboard, screen reader & pointing devices.

Keyboard

The bookend and item links must be keyboard focusable at all times (even when visually disabled).

If Previous bookend has keyboard focus, pressing TAB key must move focus to first pagination link.

If pagination item has keyboard focus, pressing TAB key must move focus to next pagination item.

If last pagination item has keyboard focus, pressing TAB key must move focus to Next bookend link.

For client-side pagination, keyboard focus must remain on the previous, next or item link after activation.

Screen Reader

Bookend link text must be announced (i.e. “Previous page” and “Next page”).

If bookend links are visually disabled, they must also be announced as disabled.

If a pagination item is visually displayed as the current page, it must also be announced as the current page.

For client-side pagination, the new page index must be announced after previous, next or item link activation.

ARIA Reference

This section gives an overview of our use of ARIA, within the specific context of this pattern.