Accessibility
The majority of accessibility issues are already guaranteed by implementation. In the case of modifications or composition in HTML, please follow the recommendations below.
Keyboard Support
- The drop zone must be focusable (e.g. tabindex="0").
- Pressing Enter or Space when focused should open the file picker.
- All action buttons (e.g. remove, cancel) must be keyboard operable (Enter/Space).
- Focus should move sensibly after actions (e.g. when a file is removed, focus goes to the next file’s button or back to the upload control).
Roles, States and Labels
- Use a native <input type="file"> (hidden or visible) for file selection, with an associated <label> to provide name/instructions.
- Use aria-label or aria-describedby for the drop zone to inform: “Drag files here or click to upload”.
- When a file is invalid, mark the file input or relevant wrapper with aria-invalid="true" and link the error message via aria-describedby.
- Use a live region (e.g. role="status" or aria-live="polite"/assertive) to announce upload progress, successes, or failures.
- For progress, use role="progressbar" with attributes aria-valuemin="0", aria-valuemax="100", aria-valuenow="xx" (or dynamic announcements) so screen readers know the progress.
- Provide an accessible name for each file’s remove or cancel button (e.g. aria-label="Remove file report.pdf").
Announcements and Feedback
- Announce when uploads start/finish/fail via live region updates.
- If retry is available, notify users of that option when errors occur.
- When errors are displayed, they should be associated with the control via aria-describedby and be read by assistive tech.
Focus Management and Visibility
- Do not trap focus unnecessarily within the uploader.
- After operations (upload, remove), move focus to a logical next control.
- Hidden content (e.g. failed file error details) should not be focusable when it’s not shown.
- Ensure visual focus indicators are always present for interactive elements.
Contrast and Visual Cues
- All text, icons, borders (default, hover, active, error) must meet WCAG contrast (AA) standards.
- Visual cues (e.g. drop‐zone border change on drag over) must be supplemented by non-visual cues (e.g. aria state changes or text).
Touch or Mobile Support
- On touch devices, ensure that tap can replace drag & drop.
- Make tap targets (remove, retry) large enough to reliably activate.