WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Upload file or files. Examples needed.


From: Patrick H. Lauke
Date: Apr 25, 2005 11:04AM

holly wrote:

> Looking for accessible examples of these form options:
> * Uploading a single file [user selects from local hard drive to upload]
> * Uploading multiple files [user able to select several files locally, one at a time, then submit/upload the choices]


just using the standard file upload form widget (plus of course the usual label etc) should be all that's needed. It's keyboard accessible, as should be the resulting dialog box (usually generated by the operating system itself).

<form action="..." enctype="multipart/form-data" method="post">
<legend>Upload a document</legend>
<label for="localfile">Select document file from local machine</label>
<input type="file" id="localfile" name="localfile" />

With multiple files it's just a case of being clear with your labels

<form action="..." enctype="multipart/form-data" method="post">
<legend>Upload a document and short synopsis</legend>
<label for="localfile1">Select document file from local machine</label>
<input type="file" id="localfile1" name="localfile1" />
<label for="localfile2">Select synopsis file from local machine</label>
<input type="file" id="localfile2" name="localfile2" />

Patrick H. Lauke