BEFOREMouse-only dropzone (hard to discover, not focusable)
Problems: no real file input, no label, not reachable by Tab, and no polite confirmation for screen readers.
Drop a file here
(There is no “Browse…” option. Keyboard users can’t activate this.)
Try: press Tab. You can’t reach the dropzone to discover how to upload.
AFTERLabeled file input + drag-and-drop + clear rules
Improvements: a real <input type="file">, instructions + requirements, inline errors, and a single polite status update per selection.
Quick checklist
- Use a real
<input type="file">with a visible label and instructions. - Show requirements as text (types, max size, count). Don’t rely on placeholder-only UI.
- Support keyboard discovery: the upload control must be reachable with
Tab. - Provide inline errors with
aria-invalid+aria-describedby. - Use calm announcements (e.g., one
role="status"update per selection), not per-drag/per-keystroke spam.