WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Upload file or files. Examples needed.

for

Number of posts in this thread: 4 (In chronological order)

From: holly
Date: Mon, Apr 25 2005 9:00AM
Subject: Upload file or files. Examples needed.
No previous message | Next message →

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]

thanks,

holly

From: Patrick H. Lauke
Date: Mon, Apr 25 2005 11:04AM
Subject: Re: Upload file or files. Examples needed.
← Previous message | Next message →

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]


Holly,

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">
<fieldset>
<legend>Upload a document</legend>
<label for="localfile">Select document file from local machine</label>
<input type="file" id="localfile" name="localfile" />
</fieldset>
</form>

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

<form action="..." enctype="multipart/form-data" method="post">
<fieldset>
<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" />
</fieldset>
</form>

--
Patrick H. Lauke
_____________________________________________________
re

From: Jukka K. Korpela
Date: Mon, Apr 25 2005 2:28PM
Subject: Re: Upload file or files. Examples needed.
← Previous message | Next message →

On Mon, 25 Apr 2005, Patrick H. Lauke wrote:


>> just using the standard file upload form widget (plus of course the
>> usual label etc) should be all that's needed.


I'd say that it's basically what we can do. The implementation of file
input in browsers is awful in usability and accessibility, but we can't
change that.


>> <label for="localfile">Select document file from local machine</label>


Usually we shouldn't explain technicalities, but since file input is
relatively rare, such an explanation is probably useful. However,
I would not repeat it for all the fields when there are several file input
fields.


>> <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" />


I think it's better to say first (e.g., after the <legend> element)
"Please select files from your computer, for submission"
("your computer" is probably a little bit more understandable
than "local machine")
and then use short labels, like "document" and "synopsis". If the label is
long, it is difficult to get the point, especially if you have cognitive
disabilities.

-- Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

From: Patrick H. Lauke
Date: Mon, Apr 25 2005 2:37PM
Subject: Re: Upload file or files. Examples needed.
← Previous message | No next message

Jukka K. Korpela wrote:

> I'd say that it's basically what we can do. The implementation of file
> input in browsers is awful in usability and accessibility, but we can't
> change that.


On Windows at least, the dialog is not any less accessible than other File > Open system dialogs, though, and works fine via keyboard and screenreader.

--
Patrick H. Lauke
_____________________________________________________
re