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

Presentation

Permalink "Presentation"
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

Operation

Permalink "Operation"

change of context may occur. | Must | EN 301 549: 9.3.2.1, 11.3.2.1 | | @!819 | Updates | When 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.

| Must | EN 301 549: 9.2.4.3, 11.2.4.3 | | @!820 | Click area | The click area of the control elements for the page navigation should be at least 24 x 24 px (see Use of the pointing device). | Should | WCAG 2.2 |

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

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

Programming/interfaces

Permalink "Programming/interfaces"

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).

| Must | EN 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 | | @!822 | Desktop: Element hierarchy | The parent / child relationships of the elements within the pagination must be communicated to the Accessibility API. | Must | EN 301 549: 11.5.2.9 | | @!823 | Status | The 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).

| Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |

No.PropertyDescriptionClassificationReference
821NameEach control element of the pagination must have a concise and expressive

Information about this article

Date:
15.01.2024
License:
CC-BY-SA 4.0
Version:
1.0

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