Components

Icon list accessibility tests

Any USWDS icon list component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Icon list accessibility status

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

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
7	1	0	6	0

Overview of recent accessibility test results:

• Passed: 1
• Passed with exceptions: 0
• Conditional: 6
• Failed: 0

Test the icon list in your project

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

• General tests
• Zoom magnification tests
• Screen reader tests

General tests

Select passing tests

Descriptive alt text identifies icon purpose. When you view icons in an icon list component, you can mouse over an icon to see its meaning or purpose. Decorative icons will have no alt text.

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

Color alone is not used to convey information. When you view an icon list, you never have to rely on color alone to understand the meaning of the icons being used.

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.8.2

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

Icons meet color contrast requirements. When you look at an icon list and use ANDI or another color contrast analyzer to look at the hex numbers, contrast between the icons and the 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.8.2

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

Icon list content is written in plain language. When you read the content in the icon list, the information is easy to understand. Content is written at the appropriate level for the audience.

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

• WCAG AAA
• 3.1.5 Reading level
• USWDS test status: Conditional
• Last test: v3.8.2

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

Icons used in an icon list are used the same way across the site. When you see or tab to any icon list, icons used will always be represent the same thing in other lists on other parts of the website.

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: v3.8.2

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

Zoom magnification tests

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

Select passing tests

Text and icons retain functionality when screen is magnified. When you zoom in to 200%, icons and text are readable and retain all of their functionality.

• 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

Screen reader tests

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

Select passing tests

Screen reader announces icon meaning and purpose when needed. When you listen to icon descriptions in a list using a screen reader, you can understand their meaning. Alt text descriptions indicate purpose.

This test is only relevant if your icons have meaning and you choose to expose them to screen readers. Visit icon list accessibility guidance for more information. Be sure to test this in your project.

• WCAG AAA
• 1.3.6 Identify purpose
• 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-13	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#3008