File input

Label set

• The file input should have a clear label describing the purpose of the input.
• The accepted file types should be clearly provided to the user using appropriate hint text.

Input status examples

File status examples

• 23% uploaded
• Checking for viruses...
• File uploaded

Error message examples

Requirements

Users should be able to:

• Navigate to the file input and upload a file.
• Understand accepted file types and format restrictions.
• Receive confirmation of uploaded files with the ability to replace if needed.

Interactions

Users should have the option to either drag and drop files into a target area or upload using a button and file selection.

Mouse Interactions

• Users should be able to drag and drop files into a target area. This target area should have 44px padding from the ‘upload’ button.
• Clearly indicate the target zone when a file is dragged over it.

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the file upload button.
• Pressing ‘tab’ from the file upload area while a file is processing moves focus to the ‘cancel’ button.
• Pressing ‘tab’ from the ‘cancel’ or ‘clear’ button moves focus to the file upload button.
• Pressing 'tab' when a file is uploaded moves focus to the file name link.
• Enter or Space. Activates the button and brings up a file dialog.
• After a file has been selected and uploaded, focus is pulled to the file upload area.

Design considerations

• The file input should have a visible label describing the purpose of the input.
• The accepted document types should be clearly provided to the user using appropriate hint text.
• Provide a clear visual indicator for the drag and drop target zone. 
• Make sure the drag and drop area has clear hover and drag over states so users know the area is interactive.
• Make sure that text in all states meets a 4.5:1 minimum contrast ratio with its background.
• Uploaded files should be added and displayed above the file input area. This enables keyboard-only users and screen reader users, and improves general readability.

Development considerations

• Use input type=”file” so that screen reader users understand the purpose of the input.
• Screen reader users should be informed of uploading states and any errors using an aria-live region.
• All ‘clear’ and ‘delete’ buttons should be programmatically associated with the uploaded file name using aria-describedby so that screen reader users understand which file will be removed.