Components

File input accessibility tests

Any USWDS file input component should pass these manual accessibility tests.

Passed WCAG 2.1 AA

File input accessibility status

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

Overview of recent accessibility test results:

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

Overview of recent accessibility test results:

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

Test the file input in your project

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

File input accessibility checklist

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

General tests

Select passing tests

File input works on mobile devices. When you use a mobile device or tablets, file inputs should work in both portrait and landscape views 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 meaning. When you view the file input component, focus indicators, text labels, field descriptions and messaging all help establish 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

File input text meets color contrast requirements. When you use a color contrast checker to view the file input, 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.0

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

File input elements have proper contrast. When you use a color contrast analyzer, the contrast between the file input and all of its elements is at least 3:1 from their respective surrounding backgrounds.

• 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

Error text indicates an incorrect file type. When you drag an incorrect file type into the file upload box, text appears describing the error.

• WCAG A
• 3.3.1 Error identification
• USWDS test status: Passed
• Last test: v3.8.0

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

Instructions for file type and use are present. When you view a file input box, you see clear, brief instructions for selecting and uploading the correct file type.

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

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

Zoom magnification tests

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

File input box is visible and functional when screen is magnified. When you zoom in to 200%, the file input box and content remain visible and retain functionality.

• 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

Keyboard navigation tests

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

Focus indicator is clearly visible. When you use a keyboard to focus on a file input box you will see a visible outline or other clear indication of focus.

The file input component may not pass all elements of this test.

The focus indicator is clearly visible, but the focus indicator wraps around both the "Drag files" area and the "choose from folder" action link at the same time. To meet user expectations, these actions should be distinct focusable elements.

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

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

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

File can be input with only a keyboard. You can successfully upload a file using only a keyboard. No mouse or dragging action is required.

• WCAG AA
• 2.5.7 Dragging movements (WCAG 2.2)
• USWDS test status: Passed
• Last test: v3.8.0

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

Content doesn’t change until the user takes an action to change it. When you access the file input with a keyboard, content stays the same until you use keys to make changes.

• WCAG A
• 3.2.2 On Input
• 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 file input 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 file input 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 file input. Screen reader announces file input. When you navigate with arrow keys and the tab key while using a screen reader, you hear the prompt to “drag file here or choose from folder” and you hear any related hints, instructions, or errors.

The file input component may not pass all elements of this test.

The file input appropriately announces the component instructions and hints to the screen reader. However, it does not announce an error message when an invalid file type is added.

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

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

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

Fields and labels are read in the same order that they appear on the page. When you use a screen reader and navigate through file input labels and fields, you hear each text label and field announced in the same order in which they appear 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

File input field announces purpose. When you tab into the file input using a screen reader, you hear messaging that helps you identify where you need to input the file for upload.

• 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

Screen reader announces all labels. When you use a screen reader and navigate to a file input using arrow and tab keys, you hear labels and status messaging for selection state.

• 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

Screen readers identify file input boxes the same way when more than one is on a page. When you tab to a file input on a page that has other file inputs, you will hear “file input” every time you tab into a new one.

• WCAG AA
• 3.2.4 Consistent identification
• 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-11-19	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2963