Forms
Accessible file upload controls: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
Keep a labeled native file input available even when a drag-and-drop area is offered. Explain allowed types and limits before selection, and provide clear states for upload progress, rejection and removal.
A practical example
An intake form accepts supporting PDFs. A Choose file control works without dragging, selected filenames are shown in text, and an oversized file gets a specific recoverable error.
How to check it
- Choose a file using keyboard navigation and the platform picker.
- Test accepted, unsupported and oversized files, including cancellation before upload.
- Check that progress, failure and removal actions are announced and that the user can replace a file without losing other form data.
What can be missed
The accept attribute helps the picker but is not server validation. Never make drag-and-drop the sole way to provide a file or hide the real input from all keyboard users.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<label for="supporting-file">Supporting PDF</label>
<input id="supporting-file" name="document" type="file" accept="application/pdf,.pdf" aria-describedby="file-limits">
<p id="file-limits">PDF only, up to 10 MB. You can choose a file without dragging.</p>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.