Accessible File Uploads: Drag Zones, Keyboard Pickers & Progress Feedback

File upload interfaces have evolved from basic browser buttons to stylish drag-and-drop dropzones. However, replacing native HTML `<input type="file">` with unsemantic `<div>` containers often breaks keyboard access and prevents screen readers from announcing selected files, upload progress, or file size rejections.

Common Dropzone Accessibility Failures

• Invisible Native Inputs: Setting `display: none` on the file input removes it from the browser's accessibility tree.
• Drag-Only Functionality: Requiring users to drag files from desktop folders violates WCAG 2.1.1 (Keyboard) and WCAG 2.5.7 (Dragging).
• Silent Progress Indicators: Upload progress bars that update visually without ARIA live announcements.

The Dual Input Pattern: Native Input + Visual Dropzone

The accessible way to style a dropzone is to visually hide the native file input using `opacity: 0` or clipping techniques while keeping it fully focusable inside the label:

<div class="upload-dropzone">
  <label for="file-upload" class="dropzone-label">
    <svg aria-hidden="true" class="upload-icon">...</svg>
    <span class="dropzone-primary-text">
      <strong>Choose a file</strong> or drag it here
    </span>
    <span class="dropzone-hint" id="file-hints">
      PDF, PNG, or JPG up to 10MB
    </span>
  </label>
  <input 
    type="file" 
    id="file-upload" 
    name="document" 
    accept=".pdf,.png,.jpg" 
    aria-describedby="file-hints" 
    class="visually-hidden-file-input">
</div>

Accessible Upload Progress Feedback

When a file is uploading, provide a semantic progress bar with live value updates:

<div 
  role="progressbar" 
  aria-valuenow="65" 
  aria-valuemin="0" 
  aria-valuemax="100" 
  aria-label="Uploading tax_return_2025.pdf: 65% complete" 
  class="progress-track">
  <div class="progress-bar" style="width: 65%;"></div>
</div>

Accessible File Type and Size Error Handling

If a user selects an oversized or invalid file format, announce the error immediately using `role="alert"`:

"Upload failed: invoice.exe is not an accepted format. Please select a PDF, PNG, or JPG file."