New Components
File upload
File upload allows the user to add a document to a form or a process. It rests on a native file field, supplemented by a help text stating the accepted formats and weight, and by a remove button. Two skins are offered, the plain form and the drop zone, both of which keep the native field. The success and refusal states are communicated visually and to assistive technologies.
When to use a file upload
- Supporting documents: the user has to attach an existing document, an invoice, a certificate, a photo.
- Data import: a spreadsheet or an export to load into the application.
- Multiple uploads: several files at once, with a summary of what was accepted.
When not to use one
- For text entry: asking for a file to collect three lines of text pushes the work onto the user.
- With no stated constraints: a field that accepts anything then refuses afterwards is a dead end. Formats and size are stated up front.
- As the only way: if an alternative exists, online entry or email, offer it.
Modes of action
- Mouse: the button opens the file picker; the drop zone accepts drag and drop.
- Keyboard: the native field is reachable with Tab and activates with Enter or Space. Drag and drop is never the only path (WCAG 2.1.1).
- Screen reader: the chosen file is announced by a live region, and its name becomes the description of the field.
Content
- Constraints before entry: accepted formats and maximum size belong in the hint, bound to the field.
- Explicit feedback: the name of the accepted file is shown, and a refusal states the rule rather than just "invalid file".
- A named removal: the remove button names the file concerned, otherwise two neighbouring buttons become indistinguishable.
On this page
Keywords
- input type="file": the native file selection field, accessible as is.
- aria-describedby: binds a hint or an error to a field. The order of the identifiers sets the reading order.
- aria-invalid: flags a field in error to assistive technology.
- Drop zone: a skin over the native field accepting drag and drop, without ever replacing it.
Breakdown of the components
Two skins over the same native field: the plain form and the drop zone.
Plain field
- The native field is accessible as is: no role and no ARIA attribute is added to describe it.
- The accessible name of the remove button names the file, "Remove the file invoice.pdf": two buttons on the same page do not share a name.
- Focus is handed back to the field BEFORE the button is hidden (WCAG 2.4.3).
- The error state follows validation both ways: set when the file is refused, cleared as soon as it passes.
Drop zone
- The real input stays in the flow and stays focusable: it is made transparent and layered over the skin button, which is decoration only.
- Since focus is held by the input, the focus indicator is drawn on the container, otherwise it would be invisible (WCAG 2.4.7).
- The drag and drop wording stays exposed: a screen reader user is not necessarily a keyboard-only user, and hiding the wording would take away an available option.
- Once a file is chosen, its name becomes the description of the field: the live announcement is fleeting, the description stays.
Screen reader
- The field is announced with its label and its hint, before any entry.
- The accepted file is announced by a live region, after a 500 ms delay.
- A refusal states the rule, and the message stays available in the description of the field.
- The remove button always names the file it removes.
Since the native file field is kept in both variants, the keyboard interactions are the browser ones: none has to be rebuilt. Drag and drop is an extra means, never the only path.
| Key | Function |
|---|---|
| Tab | Moves focus to the upload field, then to the remove button once a file is chosen. |
| Shift + Tab | Moves focus to the previous element. |
| Enter or Space | Opens the system file picker when focus is on the field. Activates the remove button when focus is on it. |
| Escape | Closes the system file picker without choosing anything. |
Note: the remove button hands focus back to the field BEFORE being hidden. In the drop zone, the real input stays focusable under the skin: the focus indicator is drawn on the container, otherwise it would be invisible.