Components

Icon accessibility tests

Any USWDS icon should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Icon accessibility status

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

Overview of recent accessibility test results:

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

Overview of recent accessibility test results:

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

Test the icon in your project

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

Icon accessibility checklist

• General tests
• Keyboard navigation tests
• Screen reader tests

General tests

Select passing tests

Color is not the only method used to convey icon information. When you view an icon paired with text, the text, and never color alone, conveys the icon’s meaning.

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

• WCAG A
• 1.4.1 Use of color
• USWDS test status: Conditional
• Last test: v3.7.1

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

Icons meet color contrast requirements. When you view the icon on a page and use ANDI or a color contrast analyzer to look at the hex colors, contrast between the icon and background is at least 3:1.

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

• WCAG AA
• 1.4.11 Non-text contrast
• USWDS test status: Conditional
• Last test: v3.7.1

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

Each icon has a consistent meaning across pages. When you use a screen reader or view the page, the icon’s meaning, and the way it is announced, are the same across all pages.

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

• WCAG AA
• 3.2.4 Consistent identification
• USWDS test status: Conditional
• Last test: N/A

• USWDS test status:
  Conditional
• Last test: N/A

Keyboard navigation tests

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

Focus indicators are clearly visible on interactive icons. When you use a keyboard to tab into an interactive icon, you see an indicator around the icon.

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

• WCAG AA
• 2.4.7 Focus visible
• USWDS test status: Conditional
• Last test: N/A

• USWDS test status:
  Conditional
• Last test: N/A

Screen reader tests

USWDS performed these tests to check icon 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 icon 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 provide a text alternative for screen readers when needed. When you use a screen reader and navigate to a non-decorative icon, 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: N/A

• USWDS test status:
  Conditional
• Last test: N/A

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-03-20	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2518