User Tools

Site Tools



The US Web Design System's usability guidance on pagination is very thorough. Some brief highlights:

  • Wrap the list in <nav> and use an unordered list for individual items. The <nav> tag should have an aria-label attribute, and the label should serve to distinguish this from the main navigation menu.
  • User aria-current="page" on the current page link. Do not write the current page as plain text without a link; this breaks the ARIA labeling pattern.
  • On each page number link, use aria-label="page [N]" to prefix the numeric page number with the word "page" (that is, do not allow the page numbers to be read as a sequence of numbers without context)
  • Use aria-label="last page, page [N]" on the link to the last page
  • Always show the complete number of items in the paged set ("Search results 1-10 of 73"). This should be part of the pagination component itself even if it is also announced elsewhere.
accessibility/pagination.txt · Last modified: 2024/02/05 16:53 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.