How to add wai-aria property for file picker?

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>

Solution

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.