Components

Search accessibility tests

Any USWDS search component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Search accessibility status

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

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
22	14	1	7	0

Overview of recent accessibility test results:

• Passed: 14
• Passed with exceptions: 1
• Conditional: 7
• Failed: 0

Test the search in your project

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

Search accessibility checklist

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

General tests

Select passing tests

Search component matches device orientation. On mobile devices and tablets, the search component should work in both portrait and landscape orientation with no loss of functionality.

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

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

Color is not the only method used to convey the search button’s meaning. When using the search button, “search” text or a magnifying glass icon convey the button’s meaning.

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

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

Search button background and text meet color contrast requirements. When you use ANDI color contrast analyzer on the search button text, the contrast between background and lettering is at least 4.5:1.

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

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

Search button background and icon meet color contrast requirements. When you use ANDI color contrast analyzer on the search icon button, the contrast between the background and icon is at least 3:1.

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

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

Search is not the only means for site navigation. When you navigate the website, there are at least two methods to reach a webpage. You may choose to use search to navigate, along with using header navigation, site map or other navigation elements.

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

• WCAG AA
• 2.4.5 Multiple ways
• USWDS test status: Conditional
• Last test: v3.8.0

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

The label “search” always has the same meaning and function. You can hear “search” when tabbing over the search button with a screen reader; you use the word “search” as a voice command to activate search. You can see the word “search” or a magnifying glass icon when looking at the search button.

• WCAG A
• 2.5.3 Label in name
• USWDS test status: Passed
• Last test: v3.8.0

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

The height and width of the search button touch target is at least 44 pixels. Touch target size can be calculated by adding the height or width of the element and the spacing that separates it from adjacent targets. When you select “inspect element” to review the button’s size, you can see the the button and its spacing is at least 44 pixels wide by 44 pixels tall.

• WCAG AAA
• 2.5.5 Target size
• USWDS test status: Passed
• Last test: v3.8.0

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

The site search feature appears in the same location on every page of the website. When you navigate to different pages on the website, the search feature is always in the same place.

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

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

Magnifying glass icon is only used to indicate “search” in every instance on the site. When you see or tab to the magnifying glass icon anywhere on the site, it will always and only be used to indicate search.

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

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

Search offers visual and auditory instructions. When you use the search component, you hear details about the purpose of the input with a screen reader or see them on the page. The instructions are specific to the search’s intent (e.g., “search this site”, “search this directory”).

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

• WCAG A
• 3.3.2 Labels or instructions
• USWDS test status: Conditional
• Last test: v3.8.0

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

Search instructions are persistent. When using the search feature, the instructions remain on screen and do not disappear from view.

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

• WCAG A
• 3.3.2 Labels or instructions
• USWDS test status: Conditional
• Last test: v3.8.0

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

Zoom magnification tests

USWDS performed these tests to check search 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

Using zoom does not obstruct the text field or search button. When you zoom to 200%, you can see the text field and button. They do not overlap with other content, and no scrolling is needed.

• WCAG AA
• 1.4.10 Reflow
• USWDS test status: Passed
• Last test: v3.8.0

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

Keyboard navigation tests

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

Select passing tests

A mouse is not required to perform actions in the search component. When you use a keyboard to tab into the search component, you can type, delete, select and deselect the search button, and perform the search.

The search component may not pass all elements of this test.

Some browsers show an "x" that lets users delete text in the search field. This is not a result of USWDS; it is built-in browser behavior. Keyboard tabbing will not focus on the "x," but users can use the backspace key to delete text from the search field.

We have logged this issue and are prioritizing it. Learn more about this issue on GitHub.

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed with exceptions
• Last test: v3.8.0

• USWDS test status:
  Passed with exceptions
• Last test: v3.8.0

Search input field and search button do not trap focus. When you use a keyboard to tab from search into other interactive elements, you don’t get stuck in the search button or text input field.

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

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

Focus indicators are clearly visible. When you use a keyboard to tab into the search input or button, the focused element has a visible outline or other clear indication of focus.

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

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

The focus indicator has proper size, perimeter and contrast. When you use a keyboard to tab into the search component, the focus indicator is clearly visible with the proper size, perimeter, and contrast.

• WCAG AAA
• 2.4.13 Focus appearance (WCAG 2.2)
• USWDS test status: Passed
• Last test: v3.8.0

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

Screen reader tests

USWDS performed these tests to check search 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

Page context does not change before search submission. Unless notified beforehand, page content stays the same until you submit the search. If search results are opened within a new window, an advanced warning should be given alongside search instructions in the aria-label or button text.

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

• WCAG A
• 3.2.2 On Input
• USWDS test status: Conditional
• Last test: v3.8.0

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

Screen reader announces elements to match visual order on screen. When using a screen reader, the search field and button are announced in the same order that they appear on the page.

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

• WCAG A
• 1.3.2 Meaningful sequence
• USWDS test status: Conditional
• Last test: v3.8.0

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

Input search field announces purpose. When you tab into the text input search field, you hear “search,” so you know it’s a search field you can type into.

• WCAG AA
• 1.3.5 Identify input purpose
• USWDS test status: Passed
• Last test: v3.8.0

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

Icon and button announce search upon initial interaction. When tabbing onto the search icon and button with your screen reader, you hear the words “search button.”

• WCAG AAA
• 1.3.6 Identify purpose
• USWDS test status: Passed
• Last test: v3.8.0

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

You hear the labels for “search” and “search button.” When you use a screen reader to search, the label for the text field says “search.” The button label is called “search button.”

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Passed
• Last test: v3.8.0

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

You hear the roles “button” and “text edit.” When you use a screen reader to search and you tab to the search button, you hear the role “button.” When you tab to the text input field, you hear “text edit,” which indicates the role of the field.

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

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

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