Components

Header accessibility tests

Any USWDS header component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Header accessibility status

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

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
26	19	1	6	0

Overview of recent accessibility test results:

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

Test the header in your project

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

Header accessibility checklist

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

General tests

Select passing tests

Header content is consistent in mobile views. When you view the page on a mobile device, the header is visible and works in both portrait and landscape settings.

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

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

Text in header meets color contrast requirements. When you use a color contrast checker to view the header, contrast between the text 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.1

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

Search icon in header meets color contrast requirements. When you use a color contrast checker to view the search icon, contrast between the icon and adjacent colors is at least 3:1.

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

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

Current page link has a distinct style. When viewing the navigation link list, the current page has distinct styling that gives clear visual indication of where you are in the site.

• WCAG AAA
• 2.4.8 Location
• USWDS test status: Passed
• Last test: v3.8.1

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

Header appears consistently. The header appears in the same location on every page of your government website.

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

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

The touch target on all interactive elements meets height and width requirements. The size and spacing of the touch target are at least 24px wide and 24px tall.

• WCAG AA
• 2.5.8 Target Size (WCAG 2.2)
• USWDS test status: Passed
• Last test: v3.8.1

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

Header is not the only way to navigate the site. When navigating through the website, you understand there are other options for navigation, such as Search or an HTML site map.

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

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

You can hover over header content. When you move the pointer over an active header menu item, the header menu stays open.

• WCAG AA
• 1.4.13 Content on hover or focus
• USWDS test status: Passed
• Last test: v3.8.1

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

Header menu can be dismissed without moving the mouse or keyboard focus away. When you press the escape key while the header menu is active, the menu closes.

• WCAG AA
• 1.4.13 Content on hover or focus
• USWDS test status: Passed
• Last test: v3.8.1

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

Header menus stay open until they are dismissed. Header menus close only when you move focus away or press the escape key.

• WCAG AA
• 1.4.13 Content on hover or focus
• USWDS test status: Passed
• Last test: v3.8.1

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

Zoom magnification tests

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

Header links are visible and functional when screen is magnified. When you zoom in to 200%, header links are legible and properly sized.

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

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

Header remains visible and functional when screen is magnified. When you zoom in to 400%, you can still see and use the header menu and navigation, and it doesn’t overlap with or get cut off by any other content.

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

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

Keyboard navigation tests

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

Keyboard can access all elements in the header. When you navigate through the header with a keyboard, you can interact with every element inside it.

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

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

Header elements do not trap keyboard focus on desktop. When you navigate with a keyboard in the desktop view, you can easily move into and out of the header.

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

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

Mobile menu navigation traps header focus. When you access the header with a mobile device, you will need to take action to close the menu before proceeding to another action.

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

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

Keyboard can bypass header and navigation. When you visit a page using the keyboard, you will find a “skip to main content” link at the top of the page, before the header navigation. The link allows you to navigate past the header and navigation into page content.

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

• WCAG A
• 2.4.1 Bypass blocks
• USWDS test status: Conditional
• Last test: v3.8.1

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

Focus follows logical content order on desktop. When you tab through the header with a keyboard, the focus stays in order of the content as intended.

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

In standard variants of the header component, the tab order of the search input in the mobile header menu does not currently match the visual order. This test passes in the "extended" variants of the header.

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

• WCAG A
• 2.4.3 Focus order
• USWDS test status: Passed with exceptions
• Last test: v3.8.1

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

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

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

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

Header is at least partially visible when focus moves across other interactive elements. When you use a keyboard and tab across elements in a header, focus on interactive elements may overlay the header, but header will always appear partially visible in background.

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

• WCAG AA
• 2.4.11 Focus Not Obscured (Minimum) (WCAG 2.2)
• USWDS test status: Conditional
• Last test: v3.8.1

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

Focus indicator is clearly visible and consistent. When you use a keyboard to navigate through the header, the focus indicator has the same sizing, contrast and perimeter, regardless of the element selected.

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

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

Screen reader tests

USWDS performed these tests to check header 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 header 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 header as a navigation landmark. When you use a screen reader and access the header, “navigation region” is announced.

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

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

Screen reader announces header elements in logical order. When you use a screen reader and reach the header, elements will be announced in the order they appear visually.

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

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

Magnifying glass icon in the header is only used to indicate “search” in every instance on the site. When you see or tab to the magnifying glass icon in any header, 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.1

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

Screen reader announces role values. When you use a screen reader and access a button or text input option, you hear that the value of the role. For example: “button”, “text edit”.

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

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

Screen reader announces current page. When landing on any page in the header navigation, the role of “current” is announced.

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

• WCAG A
• 4.1.2 Name, role, value
• USWDS test status: Conditional
• Last test: v3.8.1

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

Screen reader announces search field purpose. When you use a screen reader and access a search field in a header, you can hear that you are able to edit what is in the search field. Note: Messaging varies, depending on which screen reader you use.

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

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

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