Creating an Accessible Drag and Drop Image Input with Keyboard Controls

Step 1: Set Up the HTML Structure

Create a container that visually represents the drop zone. Use a <div> with a class such as drop-zone and ensure it has a clear label for screen readers. Include a file input field hidden from view but accessible via keyboard.

<div class="drop-zone" aria-label="Drop an image here or press Enter to select one">
  <input type="file" id="imageInput" accept="image/*" aria-hidden="true">
</div>

Step 2: Add Basic CSS Styling

Style the drop zone to indicate it is a drop target. Use hover and focus states to improve keyboard navigation. Ensure the file input is hidden but remains accessible.

.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.drop-zone:focus {
  outline: 2px solid #000;
}

Step 3: Implement Drag and Drop Functionality

Attach event listeners to handle drag and drop events. Ensure the file is only accepted if it is an image and provide feedback if the file type is incorrect.

const dropZone = document.querySelector('.drop-zone');
const fileInput = document.getElementById('imageInput');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.style.borderColor = '#000';
});

dropZone.addEventListener('dragleave', () => {
  dropZone.style.borderColor = '#ccc';
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  if (file && file.type.startsWith('image/')) {
    handleImageFile(file);
  } else {
    alert('Please drop an image file');
  }
});

Step 4: Handle Keyboard Navigation

Allow users to select an image via the keyboard by focusing on the file input and triggering it on Enter key press. Ensure the drop zone remains accessible via tab navigation.

fileInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    fileInput.click();
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && document.activeElement === dropZone) {
    fileInput.click();
  }
});

Step 5: Validate and Process the Image File

Once the file is selected, validate it and display the image preview. Provide error messages if the file is invalid or not supported.

function handleImageFile(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = document.createElement('img');
    img.src = e.target.result;
    document.body.appendChild(img);
  };
  reader.onerror = () => {
    alert('Failed to load image');
  };
  reader.readAsDataURL(file);
}

Step 6: Add Error Handling and Accessibility Feedback

Include error handling for cases where no file is selected or the file is not an image. Provide feedback to users via alerts or visual indicators.

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) {
    alert('No file selected');
  } else if (!file.type.startsWith('image/')) {
    alert('Please select an image file');
    e.target.value = '';
  }
});

By following these steps, you can create an accessible drag and drop image input with keyboard controls that is usable for all users.

Optional background preparation

If the source image also needs a transparent background, RemovePhotoBG can be used before the workflow described above. Keep an untouched original, inspect the cutout edges on the intended background and check the exported file before uploading it.