File upload
The File upload component allows users to attach one or multiple files to a form via drag-and-drop or by browsing their device.
import { ... } from '@ag.ds-next/react/file-upload';Learn more about how to meet WCAG success criteria when implementing file upload. This makes them accessible and inclusive for users of all abilities and situations.
The file upload component passed accessibility testing in 2022 and 2024.
Clear labels and instructions
Requirements
- Labels and hint text are clear and succinct.
- The purpose of the file upload is understood and conveyed by assistive technology.
- Hint text is provided where file format and size have restrictions.
- Indicate if upload is required or optional field.
Benefits
- Assistive technology users have equal access to labels and instructions.
- Helps all users avoid submitting an incomplete or incorrect form.
- Reduces the cognitive load for all users by making requirements clear upfront.
- Makes uploading documents easier for people with cognitive and learning disabilities.
- Clear labelling supports users with English as a second language.
WCAG references
- Understanding success criterion 1.3.5 Identify input purpose
- Understanding success criterion 2.4.6 Headings and labels
- Understanding success criterion 3.3.2 Labels or instructions
Error identification
Requirements
- Clear error messages – for example, for invalid file types and sizes.
- Input errors are detected and communicated to the user.
- Error messages are accessible to all users, including those with disabilities.
- Error messages are understood and conveyed by assistive technology.
Benefits
- Assistive technology users have equal access to error messages.
- Reduces user frustration by clearly explaining what went wrong.
- Helps users with cognitive disabilities understand and fix problems.
- Saves time by preventing repeated unsuccessful upload attempts.
- Enables users to solve errors themselves without having to contact tech support.
WCAG references
- Understanding success criterion 3.3.1 Error identification
- Understanding success criterion 3.3.2 Labels or instructions
Error prevention
Requirements
- Hint text is provided when it’s helpful – for example, for file format and size.
- Labels and hint text are clear and succinct.
- Users can check, reverse or confirm their input on forms with legal commitments, financial transactions or data modifications.
Benefits
- Clear guidance reduces anxiety about making mistakes.
- Helps users understand upload requirements.
- Saves bandwidth and time by preventing repeated incorrect uploads.
- Particularly valuable for users with cognitive or motor impairments.
- Provides safeguards against critical errors with significant consequences.
WCAG references
- Understanding success criterion 3.3.2 Labels or instructions
- Understanding success criterion 3.3.4 Error prevention (legal, financial, data)