Intelligence Community Design System

The elements within a pagination bar follow a logical tabbing order when moving through them. Buttons are triggered using either the ‘enter’ or ‘space’ key.

The current page is always displayed in the component so that the user knows where in the data set they are.

When the user is at the start or end of the data, the navigation buttons are disabled so that it is clear there is no more data past that point.

Using the items per page selector in the pagination bar allows users to control how much information is available per page. This can help to either simplify complex pages or to increase the information density.

Each pagination component uses accessible names for buttons that lack meaning in the context of a screen reader. Page buttons that simply have their page number as the visible label are given an accessible label of ‘Go to page X’ so that it is clearer what their function is.

The term ‘page X’ can be overridden in the case that it is not accurate. For example, this can be changed to read ‘sheet X’, ‘set X’, ‘slide X’ instead if it is a better representation.

Similarly, the icon buttons used for next, previous, first and last are also given accessible name so that their action is clearer when announced by a screen reader.

The pagination components use the nav element so that they become navigational landmarks on a page and can therefore be swiftly navigated to by users of assistive technology.

The pagination component has been based on the following resources:

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.