Side navigation accessibility tests | U.S. Web Design System (USWDS)

Skip to main content

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Components

Any USWDS side navigation component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Side navigation accessibility status

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

Overview of recent accessibility test results:
Total tests	Passed	Passed with exceptions	Conditional	Failed
10	5	0	5	0

Overview of recent accessibility test results:

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

Test the side navigation in your project

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

Side navigation accessibility checklist

General tests
Keyboard navigation tests
Screen reader tests

General tests

Side navigation appears in the same location and order on every page of the website. When you navigate to different pages on the website, the side navigation is always in the same order and in the same place.

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

Side navigation clearly indicates location on the website. When viewing side navigation content, the links have distinct styling that give clear visual indication of where you are in the site. There are also other visual elements to further indicate where you are in relation to the navigation tree.

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

Side navigation link text and background meet color contrast requirements. When you use a color contrast checker to view the side navigation, contrast between the text and background colors is at least 4.5:1.

Color is not the only method used to convey side navigation link states. When viewing the side navigation links, you can read text to understand what page you are on. There may also be underlining missing to indicate you are on the current page.

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

Keyboard can access all links in the side navigation. When you navigate through the side navigation with a keyboard, you can interact with every link inside it.

Side navigation does not trap keyboard focus. When you navigate through side navigation links with a keyboard, you can easily move into and out to get to other content.

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

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

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

Screen reader announces side navigation region and items. When using a screen reader to access the side navigation, you hear “side navigation” or “section navigation” and the list of items in the navigation.

Screen reader provides direct description of links. When you navigate to the side navigation with a screen reader, link titles are read aloud, and match the text seen on screen.

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

Side navigation link titles and states of links are announced. When using a screen reader and you tab through the side navigation, you hear link titles and if they have been visited or not. You will also be able to tell if a link is a parent or sub-menu link and how many links are present.

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

Share your feedback

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2024-10-16	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2864

Looking for U.S. government information and services?