Components

Tooltip accessibility tests

Any USWDS tooltip component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Tooltip accessibility status

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

Overview of recent accessibility test results:

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

Overview of recent accessibility test results:

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

Test the tooltip in your project

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

Tooltip accessibility checklist

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

General tests

Select passing tests

Color is not the only method used to communicate the purpose of the tooltip. When you view the tooltip, the text, and never color alone, convey its purpose.

• 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

Appropriate color contrast between tooltip text and background. When you view the tooltip and use ANDI or color contrast analyzer to look at the hex colors, contrast between the background and text 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

Appropriate color contrast between tooltip and page background. When you view the tooltip and use ANDI or color contrast analyzer to look at the hex colors, contrast between the tooltip component itself and any adjacent background content is at least 3:1.

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

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

You can hover over tooltip content. When you move the pointer over an active tooltip, the tooltip 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

Active tooltips can be dismissed without moving the mouse or keyboard focus away from the tooltip trigger. When you press the escape key while the tooltip is active, the tooltip 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

Active tooltips stay open until they are dismissed. Active tooltips close only when you move focus away from the tooltip trigger 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 tooltip 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 tooltip 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

Using zoom does not obstruct the tooltip or other content. When you zoom to 200%, the tooltip content remains visible and does not overlap with other content.

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

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

Tooltip remains visible and functional when screen is magnified. When you zoom to 200%, you can still read content in the tooltip and surrounding area easily.

• 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 tooltip 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 tooltip component is used.
2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the tooltip.
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

Tooltips can be accessed with only a keyboard. When you tab to an element that has a tooltip, the tooltip activates.

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

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

The tooltip does not trap the user or move the user around the page unwillingly. When you open a tooltip, you can navigate in and out of the trigger component without difficulty.

• 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 indicator is clearly visible around trigger element. When you tab into an element with a tooltip, a visible focus indicator appears around that element.

• 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

Screen reader tests

USWDS performed these tests to check tooltip 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 tooltip 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 tooltip content. When you focus on the tooltip trigger, the screen reader announces the tooltip content.

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

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

Tooltip content is read in a logical order. When you listen to the tooltip with a screen reader, you first hear the trigger element content, then the tooltip content, followed by the next content on the page.

• WCAG A
• 1.3.2 Meaningful sequence
• 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-07	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2646