Components

Time picker accessibility tests

Any USWDS time picker component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Time picker accessibility status

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

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
11	9	0	2	0

Overview of recent accessibility test results:

• Passed: 9
• Passed with exceptions: 0
• Conditional: 2
• Failed: 0

Test the time picker in your project

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

Time picker accessibility checklist

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

General tests

Select passing tests

Time picker display is consistent in mobile views. When you view the time picker component on mobile devices and tablets, it displays 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.1

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

Color alone is not used to convey information. When viewing the time picker, you do not have to rely on color alone to understand information.

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

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

Instructions for the time picker are clear. When you view the time picker, you find clear, simple instructions on how to select a time and what type of time format is expected.

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

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

Zoom magnification tests

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

Time picker elements are visible and functional when screen is magnified. When you zoom in to 200%, the time picker is still readable, 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

Using zoom does not obstruct the time picker. When you zoom to 400%, you can see the time picker and options. It does not overlap with other content and no scrolling is needed.

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

Focus indicator is clearly visible. When you use a keyboard to navigate through the time picker, there will be a visible outline or other clear indication around each element 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

Tabbing into the time picker doesn’t trigger a change of context. When you use a keyboard to access the time picker, there is no change until you activate with enter key or spacebar.

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

• WCAG A
• 3.2.1 On Focus
• USWDS test status: Conditional
• Last test: v3.8.1

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

Screen reader tests

USWDS performed these tests to check time picker 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 time picker 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 all instructions. When you use a screen reader and navigate through a time picker, you hear every instruction for how to select a time and for any options available.

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

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

Screen reader announces elements to match visual order on screen. When you use a screen reader to tab into the time picker, elements are announced in the same order that they appear on the page.

• 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

Screen reader announces time picker component and time selection status. When you use a screen reader with the time picker combo box, you hear the element labels, the role and the state. If there is a time already selected, you hear the selection.

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

• USWDS test status:
  Passed
• 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-11-07	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2921