Versions Compared

Version Old Version 5 New Version 6
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Paginate small lists

Anatomy

...

Item

Type

Notes

1

Button

Used for previous and next actions.

Link (icon link)

  • Navigates to previous or next page

2

Link

  • Shows page number and acts as the navigation method

3

Truncation

  • Truncates the list of pages based on behaviour below

...

  • Pagination should be an <ol> wrapped in <nav>

  • Non JS

    • I don’t think there is a non-JS version of pagination

    • Pagination could the non-JS fallback for other list types.

  • Links will navigate you to a new page of results.

  • Links open in the same window

  • The current page number is highlighted as the active page number.

  • Truncation rules:

    • TDB

Editorial 

  • N/A

Accessibility 

...

Source: https://www.a11ymatters.com/pattern/pagination/

Noteinfo

Possible update: To make pagination even more accessible, should be consider using “Previous“ and “Next“ labels in stead of chevrons?

...