Altwise

File and photo upload accessibility: quote requests, job applications and claim forms

How to make upload fields usable for keyboard, screen reader and phone visitors: clear labels and file rules, a real Choose files button, announced progress, specific errors, phone photo formats and other ways to send.

Many small business forms ask people to upload something: photos of a leaking roof for a quote, a resume on a job application, an insurance card before an appointment, or a document for a claim. Upload fields are often custom-styled "drag and drop" boxes, and they are a common place where keyboard, screen reader and phone users get stuck. This guide covers what to check, whichever website builder or form tool you use.

1. A visible label that says what to upload

The upload control needs a real label, such as "Photos of the damaged area (optional)", not only an icon or "Drop files here" (WCAG 3.3.2). Say up front which file types and sizes are accepted and how many files are allowed, for example "JPG, PNG or PDF, up to 10 MB each, up to 5 files". Hiding this until after an error wastes people's time.

2. Drag and drop must not be the only way

Dragging a file onto a box is hard or impossible for keyboard, switch and many phone users. Always offer a real "Choose files" button that opens the device's file picker (WCAG 2.1.1, 2.5.7). Check that you can reach it with Tab, open it with Enter or Space, and see where focus is (WCAG 2.4.7).

<label for="photos">Photos of the damaged area (optional)</label>
<p id="photos-help">JPG or PNG, up to 10 MB each, up to 5 photos.</p>
<input type="file" id="photos" name="photos" accept="image/jpeg,image/png" multiple aria-describedby="photos-help">

A styled upload box is fine as long as a real, named file input or button sits behind it. Many custom boxes hide the input in a way that removes it from keyboard focus; test it rather than assuming.

3. Tell people what happened after they pick a file

After choosing files, show the file names as text, with a named "Remove" button for each ("Remove roof-photo-1.jpg"). Upload progress and "Upload complete" should be announced to screen readers, for example with a status message region (WCAG 4.1.3). A spinning icon alone tells a screen reader user nothing.

4. Errors that are specific and keep the rest of the form

"Upload failed" is not enough. Say what went wrong and how to fix it: "roof.heic is not a supported type. Please use JPG or PNG" or "resume.pdf is 14 MB; the limit is 10 MB" (WCAG 3.3.1, 3.3.3). Don't clear everything else the person typed. See form error messages.

5. Phones and photo files

Most quote photos come from a phone camera. iPhones often save photos as HEIC, which some forms reject, so either accept it or say clearly which formats work. Check the form at 200% zoom and on a narrow phone screen so the upload button, file list and Remove buttons don't overlap or get cut off (WCAG 1.4.10), and make buttons big enough to tap (WCAG 2.5.8).

6. Make the upload optional where you can, and offer another way

Some people can't take or upload photos easily. If photos are only nice to have, mark the field optional. Offer another way to send them, such as "or email photos to us at ..." or "we can look at it on site". For job applications, let people paste their experience as text if they can't upload a resume file. See careers and job application pages.

7. Time limits and CAPTCHAs

Uploads on slow phone connections take time. Don't let the form time out while files upload, or warn people and let them extend the time (WCAG 2.2.1). If you use a CAPTCHA, make sure there's an option that doesn't depend on a puzzle alone. See login and CAPTCHA accessibility.

Built-in form vs. embedded form tool

Website builders and embedded form tools each handle uploads differently, and their upload widgets change over time. Whichever you use, test the live form with a keyboard and a phone rather than relying on a feature list. See embedded form builders.

Common mistakes

A 5-minute check you can do today

  1. Press Tab to your upload field. Can you reach it, see focus, and open the file picker with Enter or Space?
  2. Upload a photo from your phone. Did it work, and did the page say so in words?
  3. Try a file that is too big or the wrong type. Is the error specific, and is the rest of your form still filled in?
  4. Turn on VoiceOver or TalkBack: does the field read its label and the file rules? See the 10-minute screen reader test.
  5. Zoom to 200% and check the file list and Remove buttons.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag file inputs and buttons with no accessible name, missing form labels and many contrast problems. It can't upload files, so it can't tell whether a drag-and-drop box works by keyboard, whether progress and errors are announced, or whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your quote or application form, and gives copy-paste fixes for your platform.

Building quote and application forms for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any form or website builder.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.