File upload

Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.

Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.

Best practices

Ensure the following best practices are met when implementing this component during development.

Follow general best practice guidance to create accessible experiences for users of all abilities.

• Always include a “Select file(s)” button which can be accessed and activated using the keyboard. Drag and drop is a mouse-dependent operation, and is not accessible with keyboard-only navigation.
• Clearly communicate that automatic uploads immediately initiate file uploads to the server using the description or file input button.

File uploader

• Indicate that uploading a file is mandatory before proceeding using aria-required or required.
• Use aria-roledescription to provide a more specific description of the dropzone’s function beyond its default semantic role. This helps screen readers clearly convey context to users.
• Use role='status' to create a non-obtrusive live region for announcing important asynchronous updates, such as file uploads or failures. Avoid frequent updates to prevent overlapping or missed announcements.
• Use a section message to provide updates on files that have failed to update. Simplify keyboard navigation by using an inline link to the retry button of the file that’s in error.
• Use a Dialog for manual file upload patterns to let the users interact with the list of files marked for upload.

File card

• Use aria-describedby to associate descriptive information, such as error messages, with elements like file name and file size using an ID reference list. This helps screen readers convey additional context to users.
• Use aria-label to provide an accessible name when visual labels aren’t sufficient. This can also identify inline actions represented by icons.
  • Success badges will be announced as “Successfully uploaded [File name].”
  • Reload icon will be announced as “Retry uploading [File name].”
  • Delete icon will be announced as “Delete [File name].”
• Identify determinate progress indicators with role=progressbar.
• Use a table component to display files and their upload statuses for dense UIs.

VGAR (internal only)

Find links to the Visa Global Accessibility Requirements (VGAR) for this component.