Building an accessible pagination pattern

First or last two links will always be available, with ellipses indicating there are other pagination links available as a user interacts with the navigation.

Example 1 shows a pagination of this type in it's default state, where the first link is the active link. The first four links are displayed, with an ellipses to note additional links will become available as the user activates later pages in the navigation. Links for pages 19 and 20 are also displayed to both allow a user to jump towards the end of the pagination, as well as to indicate how many pages can be expected to be found in this pagination.

Example 2 shows the state of the pagination after someone has already navigated through a number of pages. Pages 1 and 2 remain in the pagination to allow a user to easily jump back towards the beginning of the pagination.

In this variation the next and previous links come first in the pagination listing.

The idea here is to provide quick access to the next and previous links, under the assumption that keyboard focus returns to the top of the document (standard web page), or a set-location in the document (common accessible SPA expectation), on new page load.

This pattern may not be appropriate if

Rather than using an ellipses to break up page links, the previous and next links serve a dual purpose of both loading the previous and or next grouping of pagination links, and also loading that new page. e.g. 'previous' would load links 5 to 9, and 9 would become the active pagination link.