Components

Collection accessibility tests

Any USWDS collection component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Collection accessibility status

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

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
13	8	0	5	0

Overview of recent accessibility test results:

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

Test the collection in your project

USWDS tests components in isolation. You need to test the collection 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.

Collection accessibility checklist

• General tests
• Keyboard navigation tests
• Screen reader tests

General tests

Select passing tests

Headings are structured in a logical order. When you interact with a collection using a screen reader, you hear headings move in a logical order. For example, headings move from h2 to h3.

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

• WCAG A
• 1.3.1 Info and relationships
• USWDS test status: Conditional
• Last test: v3.8.2

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

Collection works on mobile devices. When you use a mobile device or tablet, collection content is visible in both portrait and landscape views with no loss of functionality.

• WCAG AA
• 1.3.4 Orientation
• USWDS test status: Passed
• Last test: v3.8.2

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

Color is not the only method used to convey meaning. When you view collection content, links, tags and other text all help establish context.

• 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

Links, text and tags in the collection meet color contrast requirements. When you use a color contrast checker to view a collection, contrast between links, text and tag colors against the background is at least 4.5:1.

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

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

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

All headings are clear and descriptive. When you view the collection, the headings are clear and concise.

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

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Conditional
• Last test: v3.8.2

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

Keyboard navigation tests

USWDS performed these tests to check collection 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 collection component is used.
2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the collection.
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

Collection content is accessible using only keyboard. When you use a keyboard, you can navigate to links, buttons and content, and navigate away.

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

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

Collection content does not trap keyboard focus. When you tab through collection content with a keyboard, you can easily move in and out of collection elements 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 follows logical content order. When you tab through a collection with a keyboard, focus on links and other interactive elements stays in logical order in relation to the other content.

• WCAG A
• 2.4.3 Focus order
• 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 focus on a collection, you will see a visible outline or other clear indication of focus for interactive elements.

• 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 collection 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 collection 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

Icons or graphics provide a text alternative for screen readers when needed. When you use a screen reader and navigate to a non-decorative icon or graphic, you hear an appropriate description of the icon. If the icon is purely decorative, you should not hear a description.

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

• WCAG A
• 1.1.1 Non-text content
• USWDS test status: Conditional
• Last test: v3.8.2

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

Screen reader announces collection region. When using a screen reader to access a collection, you hear the hierarchy of headings, lists and links as they are presented on the page. You can also use shortcut keys in the screen reader to navigate the items in the collection.

• WCAG A
• 1.3.1 Info and relationships
• USWDS test status: Passed
• Last test: v3.8.2

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

Collection content is read in the same order that it appears on the page. When you use a screen reader and navigate through a collection, you hear each piece of content in the same order in which it appears on the page (e.g., left to right and top to bottom for English pages).

• 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 provides direct description of links. When you navigate to a link in a collection with a screen reader, you can understand where the link will take you.

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

• WCAG A
• 2.4.4 Link purpose (in context)
• USWDS test status: Conditional
• Last test: v3.8.2

• USWDS test status:
  Conditional
• 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-12-18	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#3010