Components

Pagination accessibility tests

Any USWDS pagination component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Pagination accessibility status

The USWDS team did 10 tests based on WCAG 2.1 AA success criteria.

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
10	8	0	2	0

Overview of recent accessibility test results:

• Passed: 8
• Passed with exceptions: 0
• Conditional: 2
• Failed: 0

Test the pagination in your project

USWDS tests components in isolation. You need to test the pagination component in the context of your own site to ensure compliance with Section 508 accessibility standards.

Use the checklist below.

Follow the "how to test" instructions for each type of assistive technology.

Anyone can test for accessibility.

These quick manual tests don't require special equipment.

Pagination accessibility checklist

• General tests
• Zoom magnification tests
• Keyboard navigation tests
• Screen reader tests

General tests

Select passing tests

Color is not the only method used to convey pagination link states. When navigating through the pagination links, you can read the numbers to understand what page you are on. There may also be underlining missing to indicate you are on the current page.

• WCAG A
• 1.4.1 Use of color
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Numbers and background in in pagination links meet color contrast requirements. When you use a color contrast checker to view the pagination, contrast between the number color and background color is at least 4.5:1.

• WCAG AA
• 1.4.3 Contrast (Minimum)
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Pagination clearly indicates location on the website. When viewing the paginated content, the numbers have distinct styling that give clear visual indication of where you are in the site and how to navigate back and forth.

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG AAA
• 2.4.8 Location
• USWDS test status: Conditional
• Last test: v3.8.2

• USWDS test status:
  Conditional
• Last test: v3.8.2

When in use, pagination links appear in the same location on every page of the website. When you navigate to different pages on the website, the pagination is always in the same place, when it is present.

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG AA
• 3.2.3 Consistent navigation
• USWDS test status: Conditional
• Last test: v3.8.2

• USWDS test status:
  Conditional
• Last test: v3.8.2

Zoom magnification tests

USWDS performed these tests to check pagination accessibility and usability for zoom magnification. For help performing your own zoom magnification tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the pagination component is used.
2. Enlarge the view of your screen to 200%.
3. Once zoomed, use a mouse to complete the tests in the checklist.

---

Use one of the following methods to control screen magnification in your browser:

1. Windows OS: Click ctrl while using the scroll wheel on your mouse until you see "200%" appear in the top right of your screen. Or, click ctrl + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click ctrl + 0.)
2. Mac OS: Click command + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click command + 0.)
3. Browser settings: Customize your browser settings to display pages at 200%.

Select passing tests

Pagination content is visible and functional when screen is magnified. When you zoom in to 200%, paginated content is legible and properly sized.

• WCAG AA
• 1.4.4 Resize text
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Keyboard navigation tests

USWDS performed these tests to check pagination accessibility and usability for keyboard navigation. For help performing your own keyboard navigation tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the pagination component is used.
2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the pagination.
3. Use the testing checklist to make sure all functionality works with keyboard navigation.

---

For instruction for using keyboard navigation, use this resource from WebAIM.

Select passing tests

A mouse is not required to perform actions in the paginated content. When you navigate into the paginated links, you can use your keyboard to access the links.

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Pagination does not trap keyboard focus. When you navigate through pagination links with a keyboard, you can easily move into and out to get to other content.

• WCAG A
• 2.1.2 No keyboard trap
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Focus indicator is clearly visible. When you use a keyboard to navigate through the paginated content, there will be a visible outline or other clear indication around each number where the the focus is.

• WCAG AA
• 2.4.7 Focus visible
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Screen reader tests

USWDS performed these tests to check pagination accessibility and usability for screen readers. For help performing your own screen reader tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the pagination component is used.
2. Open a dedicated screen reading app or your operating system screen reader.
3. Test with both a keyboard and a mouse to complete the tests in the checklist.

---

Instructions for setting up the screen reader on your operating system:

1. VoiceOver for Mac: Getting started guide
2. Narrator for Windows: Complete guide to Narrator

Select passing tests

Screen reader announces paginated links in logical order. When you use a screen reader and reach paginated links, they will be announced in the order they appear visually and will follow numerical order.

• WCAG A
• 1.3.2 Meaningful sequence
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Screen reader announces role values. When you use a screen reader and access a link in the pagination, you hear the value of the role. For example, “ten”, “current”.

• WCAG A
• 4.1.2 Name, role, value
• USWDS test status: Passed
• Last test: v3.8.2

• USWDS test status:
  Passed
• Last test: v3.8.2

Share your feedback

• Propose a new test
• Report an error

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2024-10-16	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2865