• Success Criterion 2.5.7
  • Conformance level AA

File Upload Available Only Through Drag and Drop

2.5.7 — Dragging Movements

Scenario

Setting

A video streaming service's show detail page

What’s wrong

File upload via drag-drop only (no file-picker button).

Example 

<div id="dropzone" ondrop="handleFileDrop(event)" ondragover="allowDrop(event)">
  Drop your subtitle file here
</div>
<!-- there is no <input type="file"> anywhere on the page -->

Why it matters

A user who can't drag a file from their desktop into the browser window can never upload custom subtitles.

How to test

Try uploading a file via a file-picker button instead of drag-and-drop: if drag-drop is the only method, it fails.

How to fix

Keep the drop zone for convenience, but always pair it with a standard file-picker button.

<div id="dropzone" ondrop="handleFileDrop(event)" ondragover="allowDrop(event)">
  Drop your subtitle file here, or
  <button onclick="document.getElementById('fileInput').click()">Choose a file</button>
  <input type="file" id="fileInput" hidden onchange="handleFileSelect(event)">
</div>

Outcome

A user clicks Choose a File, selects their subtitle file from a dialog, and it uploads normally.

Who is affected

People with limited fine motor control and screen reader users who can't target a drop zone precisely.

Learn more

Related scenarios