Synonyms: Page navigation

See also: Scrollbars

Pagination is used to navigate through pages or sequential elements (for example, with tables).

The requirements for the individual control elements are described for the respective control element.

Figure 54: Pagination
No.PropertyDescriptionClassificationReference
817ContrastThe highlighting for the current page must have a contrast ratio of at least 3:1 with respect to the background and the other pages.MustEN 301 549: 9.1.4.11, 11.1.4.11
No.PropertyDescriptionClassificationReference
818Use of the keyboardIt must be possible to access, operate and exit the page navigation with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
819UpdatesWhen focusing and using the control elements for the page navigation, no unexpected change of context may occur.MustEN 301 549: 9.3.2.1, 11.3.2.1
819UpdatesWhen operating the control elements for the pagination, no loss of focus may occur.

Note: During the operation, the focus must remain on the control elements of the pagination or be placed at the start of the area controlled by the pagination.

MustEN 301 549: 9.2.4.3, 11.2.4.3
820Click areaThe click area of the control elements for the page navigation should be at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2

Use of the keyboard: page navigation

Permalink "Use of the keyboard: page navigation"
ActionKeyClassification
Focusing of the first element of the page navigationTABRequired
Exiting the page navigationTABRequired
Navigating within the page navigationTAB or ARROW buttons (depending on the used elements)Required
Operating interactive elements in the page navigationCorresponding to the respective elementRequired
Navigating to the previous or next page (if the focus is in the element which is controlled by the page navigation)PAGE UP, PAGE DOWN
ARROW keys
Recommended
Navigating to the first or last page (if the focus is in the element which is controlled by the page navigation)POS 1, ENDRecommended
No.PropertyDescriptionClassificationReference
821NameEach control element of the pagination must have a concise and expressive Accessible Name.

Note 1: If the navigation buttons are visually labeled with “1”, “2”, “3” or “<” and “>”, the Accessible Name should be called

  • either “page 1”, “page 2”, “page 3” and/or “previous page” and “next page”, or
  • “1”, “2”, “3” and/or “back” and “forward”, and the buttons should be located in a group which is labeled with “pagination”, for example.

Note 2: If the context of the pagination is visually clear but programmatically unclear (because the pagination might refer to a page or table on the page, for example), this context should be communicated the Accessibility API (with the Accessible Name, the Accessible Description, or the labeling of a group, for example).

MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8
822Desktop: Element hierarchyThe parent / child relationships of the elements within the pagination must be communicated to the Accessibility API.MustEN 301 549: 11.5.2.9
823StatusThe status of the control elements for the pagination must be communicated to the Accessibility API (see Element status).

Note: In particular, this applies to the “current page” status and the “disabled” status (e.g. to the buttons for the first and previous page, if page 1 is the current page).

MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5

Information about this article

You are welcome to send feedback by email about our handout!