I am currently following this tutorial to have a file picker functionality. http://www.alecjacobson.com/weblog/?p=1645
I would like to add wai-aria attribute for “choose file” part to make it readable. I have tried to use aria-controls and tabindex but couldnt get any positive response when i simulate some validators.. Any idea?
<body>
<input id="file" type="file" multiple onchange="startRead()">
<h3>Progress:</h3>
<div style="width:100%;height:20px;border:1px solid black;">
<div id="bar" style="background-color:#45F;width:0px;height:20px;"></div>
</div>
<h3>File contents:</h3>
<pre>
<code id="output">
</code>
</pre>
</body>
Advertisement
Answer
Modern browsers identify the file type of input control as one of several different “types” (Label, Input, or a Generic Object) with a button as a pseudo-element attached. But for accessibility purposes I think it is safe to identify it as a button to screen readers as that is interactively how it is used.
So, I would add the following WAI-ARIA attributes to your file type of input controls:
<input id="fileupload" type="file" role="button" aria-label="File Upload" />
If your screen reader community gets confused by that then “role=textbox” would be my second option.