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.