Upload
Motovation
The html5 file selector (input of type "file") is not very accessible in firefox.
If the element has a label, it is never announced by NVDA, and sometimes announced by Jaws.
In addition, many people do not like the look of the standard input element, especially when type is set to file.
The following is one way to rectify both situations.
See the following article for more detailed examples:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
Issues
The second file selector widget here uses a label element instead of a button as trigger.
I have not added any styles to make it appear as a button.
Basic Approach
-
hide inputs with type file via display:none
-
for triggers which are not label elements, add click handler to send clicks to the input element when trigger is clicked
-
if trigger is a label which is properly associated with an input of type file, clicks are automatically sent to it, even when its hidden, and it gets a role of button to tell screen reader users it can be clicked
-
add a change listener to each file input which creates an unordered list of file names (for demo purposes -- you'd most likely do something more useful here)
-
display a count of file names
-
add role="alert" to the count element and remove it after a short time (causes the screen reader to announce the count -- good feedback since the screen reader gives no other hints that the list was modified)
-
set focus back to the trigger (actually blur, followed by focus since simply setting focus did not seem to work correctly)