File input
<input type="file"> elements let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission.
A file input that accepts a single file is the simplest implementation. Each <input type”file”> should have a <label>. Associate the two by matching the <label for="special-input"> attribute to the <input id="special-input">attribute.
Additionally, the file input should include text that announces what file types are accepted and if including a file is required. Use the accept and required attributes as needed.
There are some shortcomings that teams have encountered when using the USWDS file input component. Out of the box, the USWDS file picker component does not properly announce a selected file via a screen reader once the user selects a file. Additionally if you shift focus back to the file picker after a file is selected the state of the file picker is not announced, letting the user know that a file has already been chosen.
This can be solved using aria-describedby - see example from EASi
A file input that accepts multiple files will need additional accessibility work. According to USWDS some users might not know how to select multiple files in a file browser or the action may be difficult on certain devices. Make sure to do user testing if you allow multiple files in the input.
It is common for single or multi-file inputs to include a drag and drop region. This is a quick way for certain users to select multiple files and bring them into a form or file upload workflow. However in order to make the interaction fully accessible there must also be a way to manually open the file picker that doesn’t rely on using a mouse only.
The USWDS file input component below includes both a drag and drop region as well as a link to open the file picker.
Beyond the functionality of the file input in HTML, there are a number of choices to make about when and how file uploads. The most simple way to handle this is to only upload the file when you submit (POST) the overall form. However, asynchronous uploading as the user adds a file is a common UI pattern.
Things to consider for async upload:
- Progress indicator to show file upload, scanning, failures, or any other upload states
- Single file - choose sensible increments of progress to announce (percentages, steps, etc.)
- Multi-file upload - announce the aggregate progress of all the files together
- Allow removal or retry of files that fail at any step
- If using a file input that accepts multiple files, decide how the input is going to visualize and announce the state of multiple files being selected and uploaded.
The example below from Dropbox shows a small toast menu at the bottom of the page that takes tab focus and announces the number of files uploading and an action to view more details about the files. This toast menu pattern is common among multi-file inputs, however additional work must be done to properly focus on the menu and announce the status of the upload.
Projects at truss that have used file input
- MC-Review
- Scylla/EASi
- MilMove